作者:洪佳蓉名羽明德 | 来源:互联网 | 2023-05-26 09:49
是否可以使用CSS代码制作下面显示的形状?
我尝试了一些东西,但我做不到,所以我需要一些帮助.
#demo {
background-color: #333;
height: 100px;
position: relative;
width: 100px;
}
#demo:after {
content: ' ';
height: 0;
position: absolute;
width: 0;
border: 10px solid transparent;
border-top-color: #333;
top: 100%;
left: 50%;
margin-left: -10px;
}
1> Weafs.py..:
您可以在:before
and和:after
pseudo元素上使用两个三角形.
div {
position: relative;
width: 100px;
height: 40px;
border: 4px solid black;
}
div:after, div:before {
content: '';
position: absolute;
width: 0;
height: 0;
bottom: -9px;
right: 20px;
border-top: 10px solid white;
border-right: 2px solid white;
border-left: 10px solid transparent;
}
div:before {
bottom: -15px;
right: 16px;
border-top: 15px solid black;
border-right: 4px solid black;
border-left: 15px solid transparent;
}