您的位置:首页 > Web前端 > > 正文

css中三角标(使用css实现三角符号效果)

更多 时间:2022-03-31 12:43:19 类别:Web前端 浏览量:1124

css中三角标

使用css实现三角符号效果

关于使用css制作三角符号,网上有很多的例子了,在这里只是为了详细的向各位解释一下三角符号的原理

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

css中三角标(使用css实现三角符号效果)

那么如何使用css的该属性来实现三角符号的效果呢,代码如下:

html代码

  • <body>
        <li></li>
    </body>
    
  • css代码

  • li: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;
    }
    
  • 效果图:

    css中三角标(使用css实现三角符号效果)

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

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

    推荐:

    感兴趣的朋友可以关注小编的微信公众号【码农那点事儿】,更多网页制作特效源码及学习干货哦!!!

    总结

    以上所述是小编给大家介绍的使用css实现三角符号效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对开心学习网网站的支持!

    标签:三角符号 css