使用css怎么实现三角符号-创新互联

小编给大家分享一下使用css怎么实现三角符号，希望大家阅读完这篇文章后大所收获，下面让我们一起去探讨吧！

创新互联公司主要从事成都做网站、网站设计、网页设计、企业做网站、公司建网站等业务。立足成都服务西和,十年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:028-86922220

下图，是一个长宽为100px，边框宽度为100px的一个元素，由此可见，在css中上下左右的边框相交处并不是一个直线，所以，可以根据此属性进行编写三角符号

那么如何使用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;
}

效果图：

这种方法是使用的伪类来实现的三角符号，然后使用绝对定位，不会占用空间

transparent是透明色，大家如果想要的三角符号的方向不一样，只需将对应方向的边框颜色加上，其他的改为透明色即可

看完了这篇文章，相信你对使用css怎么实现三角符号有了一定的了解，想了解更多相关知识，欢迎关注创新互联网站制作公司行业资讯频道，感谢各位的阅读！

名称栏目：使用css怎么实现三角符号-创新互联
URL分享：http://cdkjz.cn/article/jhech.html