扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
小编给大家分享一下使用css怎么实现三角符号，希望大家阅读完这篇文章后大所收获，下面让我们一起去探讨吧！
网站建设哪家好，找创新互联建站！专注于网页设计、网站建设、微信开发、微信平台小程序开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了安丘免费建站欢迎大家使用！
下图，是一个长宽为100px，边框宽度为100px的一个元素，由此可见，在css中上下左右的边框相交处并不是一个直线，所以，可以根据此属性进行编写三角符号
.jpg)
那么如何使用css的该属性来实现三角符号的效果呢，代码如下：
html代码
css代码
p:after{
position: absolute;
width: 0px;
height: 0px;
content: " ";
border-right: 100px solid transparent;
border-top: 100px solid #ff0;
border-left: 100px solid transparent;
border-bottom: 100px solid transparent;
}效果图：
.jpg)
这种方法是使用的伪类来实现的三角符号，然后使用绝对定位，不会占用空间
transparent是透明色，大家如果想要的三角符号的方向不一样，只需将对应方向的边框颜色加上，其他的改为透明色即可
看完了这篇文章，相信你对使用css怎么实现三角符号有了一定的了解，想了解更多相关知识，欢迎关注创新互联行业资讯频道，感谢各位的阅读！
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网