<分区>
首先是 fiddle :http://jsfiddle.net/krish7878/kuG6X/3/
我需要一个只有文本气泡边框的 css 三 Angular 形，背景应该是透明的。
代码:
HTML:<div class="arrow-up"> </div>
CSS:
.arrow-up {
position:absolute;
top:50px;
left:5px;
width: 0;
height: 0;
border-left: 0px solid transparent;
border-right: 42px solid transparent;
border-top: 42px solid black;
margin: 10px;
-ms-transform: rotate(315deg); /* IE 9 */
-webkit-transform: rotate(315deg); /* Chrome, Safari, Opera */
transform: rotate(315deg);
}
最佳答案
有人已经对这个问题给出了很好的答案:https://stackoverflow.com/a/18607208/1320911
.triangle {
position: relative;
width: 20px;
margin-top: 100px;
}
.triangle>div {
width: 20px;
height: 2px;
background: red;
margin-top: 100px;
}
.triangle>div:before {
content: " ";
display: block;
width: 20px;
height: 2px;
background: red;
-webkit-transform: rotate(56deg);
-moz-transform: rotate(56deg);
-ms-transform: rotate(56deg);
transform: rotate(56deg);
position: absolute;
top: -8px;
right: -5px;
}
.triangle>div:after {
content: " ";
display: block;
width: 20px;
height: 2px;
background: red;
-webkit-transform: rotate(-56deg);
-moz-transform: rotate(-56deg);
-ms-transform: rotate(-56deg);
transform: rotate(-56deg);
position: absolute;
top: -8px;
left: -5px;
}
关于html - 带边框的 CSS 三 Angular 形，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25082685/