我有一个推荐框,我想在其中添加一个三 Angular 形。
.arrow {
float: left;
margin-left: 25px;
margin-top: 20px;
width: 0;
height: 0;
border-top: 20px solid #eee;
border-left: 0px solid transparent;
border-right: 25px solid transparent;
}
问题是三 Angular 形最终是实心的,而不是带有灰色边框的白色。下面是 CSS 当前显示方式的屏幕截图。在此先感谢您的时间和帮助。
最佳答案
您可以创建两个三 Angular 形,一个重叠另一个,以创建这种镶边效果。您可以使用::before 和::after 伪元素来做到这一点,这样您就不会拥有任何多余的 HTML。
.mybox {
position: relative;
border: 1px solid #ccc;
}
.mybox:before,
.mybox:after { position: absolute;
left: 20px;
bottom: -19px;
display: block;
width: 0;
height: 0;
border-width: 0 25px 20px;
border-style: solid;
border-color: transparent;
border-left-color: #fff;
content: ' ';
}
.mybox:before { left: 19px;
bottom: -21px;
border-left-color: #ccc; }
关于证明框的 CSS 三 Angular 形,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20319195/