如何创建边框三 Angular 形?
我唯一能想到的就是做一个三 Angular 形
.triangle {
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 20px solid #8e8e8e;
}
但是这是一个实心三 Angular 形,有没有办法让它看起来像三 Angular 形延伸了边界
最佳答案
创建一个绝对位于 div 底部的 :after
或 :before
元素。
.box {
position: relative;
background-color: #F00;
border: 1px solid #000;
width: 50px;
height: 50px;
}
.box:after {
content: "";
width: 16px;
height: 16px;
position: absolute;
background-color: #FFF;
bottom: -8px; /* half of the elements width/height */
left: 50%;
transform: translateX(-50%) rotate(45deg);
border-bottom: 1px solid #000;
border-right: 1px solid #000;
}
<div class="box">
我将 :after
元素设为白色,这样您就可以看到其中发生了什么。
关于html - 如何使用CSS制作边框三 Angular 形?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47318399/