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