Hướng dẫn how to add arrow to div in css - cách thêm mũi tên vào div trong css

Tôi đang cố gắng tạo nhãn lỗi cho Div với mũi tên, nhưng có vấn đề với tâm.

Tôi có:

Tôi cần một cái gì đó như:

HTML:

This field is required.

CSS:

div.error-label{
    padding: 7px 10px 0 4px;
    color: #fff;
    background-color: #DA362A;
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px;
}

div.error-label-arrow{
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent; 
    border-right:10px solid #DA362A;
    float: left;
}

Có thể không?

Đây là fiddle

Web-tiki

95K32 Huy hiệu vàng211 Huy hiệu bạc244 Huy hiệu Đồng32 gold badges211 silver badges244 bronze badges

hỏi ngày 11 tháng 2 năm 2013 lúc 9:02Feb 11, 2013 at 9:02

2

Bạn có thể sử dụng các lớp giả CSS để thực hiện việc này, do đó bạn sẽ không cần một phần tử "mũi tên":

div.error-label {
  padding: 10px;
  color: #fff;
  background-color: #DA362A;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  width: 190px;
  margin: 30px;
}

div.error-label:before {
  content: ' ';
  height: 0;
  position: absolute;
  width: 0;
  left: 18px;
  border: 10px solid transparent;
  border-right-color: #DA362A;
}

This field is required.

dota2pro

6.7427 Huy hiệu vàng37 Huy hiệu bạc70 Huy hiệu đồng7 gold badges37 silver badges70 bronze badges

Đã trả lời ngày 11 tháng 2 năm 2013 lúc 9:11Feb 11, 2013 at 9:11

CurtiscurtisCurtis

99,6K63 Huy hiệu vàng267 Huy hiệu bạc348 Huy hiệu đồng63 gold badges267 silver badges348 bronze badges

2

Đây là giải pháp

div.error-label{
    padding: 7px 10px 0 4px;
    color: #fff;
    background-color: #DA362A;
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px;
    width: 150px;
    margin-left: 5px;
}

div.error-label-arrow{
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent; 
    border-right:10px solid #DA362A;
    float: left;
    height: 1px;
    margin-top: 3px;
}

This field is required.

dota2pro

6.7427 Huy hiệu vàng37 Huy hiệu bạc70 Huy hiệu đồng7 gold badges37 silver badges70 bronze badges

Đã trả lời ngày 11 tháng 2 năm 2013 lúc 9:11Feb 11, 2013 at 9:09

CurtiscurtisHary

99,6K63 Huy hiệu vàng267 Huy hiệu bạc348 Huy hiệu đồng7 gold badges40 silver badges76 bronze badges

Đây là giải pháp

.error{
   position: relative;
   background: red;
   padding: 10px;
   color: #fff;
   margin:0 0 0 12px;
   width:auto;
   display:inline-block;
 
 }

.error::before {
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 9px 11px 9px 0;
	border-color: transparent red transparent transparent;
	position: absolute;
	left: -11px;
	top: 0;
	bottom: 0;
	margin: auto;
}

.arrow_type2 {
	position: relative;
	background: #28d57f;
	border: 3px solid #0cf5a7;
  padding:50px 20px;
  margin-left:20px;
  margin-top:20px;
  width:auto;
  display:inline-block;
}
.arrow_type2:after, .arrow_type2:before {
	right: 100%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.arrow_type2:after {
	border-color: rgba(40, 213, 127, 0);
	border-right-color: #28d57f;
	border-width: 10px;
	margin-top: -10px;
}
.arrow_type2:before {
	border-color: rgba(12, 245, 167, 0);
	border-right-color: #0cf5a7;
	border-width: 14px;
	margin-top: -14px;
}

This is field required


Arrow type two

Đã trả lời ngày 11 tháng 2 năm 2013 lúc 9:09Sep 11, 2019 at 7:50

HaryharySunil R.

5.5827 Huy hiệu vàng40 Huy hiệu bạc76 Huy hiệu đồng8 silver badges14 bronze badges

Bạn có thể đạt được điều này bằng cách sử dụng kiểm tra Pseudo elements bên dưới câu trả lời

Làm thế nào để bạn vẽ một hộp với một mũi tên trong CSS?

Đây là một hộp có một số nội dung và một mũi tên ở đầu ..