词条信息

admin
超级管理员
版本创建者 发短消息   
简易百科旧版 >> 使用css制作三角符号 >> 历史版本

最新历史版本 :使用css制作三角符号 返回词条



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


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



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


html代码



<body>

    <div></div>

</body>

 


css代码

div: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;

}

 


效果图: