我最近学习了如何使用 CSS 和 HTML 创建三 Angular 形 div 的外观。现在,我想知道是否可以在三 Angular 形 div 的任何边周围添加边框,这样如果我给 div 一个白色背景和一个黑色边框,您仍然可以看到它吗?有什么办法可以做到这一点?
JSFIDDLE:http://jsfiddle.net/c75KM/1/
HTML:
<div class="arrow-up"></div>
CSS:
.arrow-up {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid black;
}
最佳答案
这是典型的做法:
.arrow-up:after {
position:absolute;
content:"";
width: 0;
height: 0;
margin-top:1px;
margin-left:2px;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid white;
}
.arrow-up:before {
position:absolute;
content:"";
width: 0;
height: 0;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
border-bottom: 12px solid black;
}
关于html - 使用 CSS 创建三 Angular 形 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15083019/