如何创建边框三角形?
我唯一想到的就是制作一个三角形
.triangle {
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 20px solid #8e8e8e;
}
但这是一个实心三角形,有没有办法使它看起来像三角形延伸边界
答案 0 :(得分:3)
创建一个绝对位于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">
&#13;
我已将:after
元素设为白色,以便您可以了解其中发生的情况。
答案 1 :(得分:1)
您需要将三角形元素移动到子布局下。 我为边框设计添加了更多三角形。
.balon {
width: 350px;
height: 120px;
border: 5px solid #2C6DBF;
margin: 50px auto;
position: relative;
border-radius: 8px;
}
.balon::after, .balon::before {
width: 0;
height: 0;
content: '';
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 21px solid #fff;
position: absolute;
bottom: -19px;
right: 0;
left: 0;
margin: auto;
}
.balon::before {
border-left-width: 20px;
border-right-width: 20px;
border-top-width: 25px;
border-top-color: #2C6DBF;
bottom: -25px;
}
&#13;
<div class="balon">
</div>
&#13;