使用CSS写三角形

html元素在宽高为0的情况下,border四面边呈三角形。
我们只需要在取其一面边框,即可写出三角形。

在这里插入图片描述

display: inline-block;
width:0px;
height:0px;
border-width: 20px;
border-style: solid;
border-color: transparent transparent transparent @primary;

将不想显示的那面边框,设置为透明。

注:如果是使用::before或::after写三角形,要写上content:'';

最终呈现效果:
在这里插入图片描述

发布了14 篇原创文章 · 获赞 2 · 访问量 2501

猜你喜欢

转载自blog.csdn.net/janyxh/article/details/103241823