您好,欢迎访问一九零五行业门户网

巧妙用css border属性实现规则图形_html/css_WEB-ITnose

首先:一个例子:
#div1 {
    height:20px;
    width:20px;
    border-color:#ff9600 #3366ff #12ad2a #f0eb7a;
    border-style:solid;
    border-width:20px;
}
此代码的效果图为:
中间白色为宽高各为20px的div1。
那么问题来了,要实现三角号,只需将div宽高设置为0,然后只设置一边的border显示即可
代码如下:
#div2 {
    height:0;
    width:0;
    overflow: hidden;
    border:20px dashed transparent;
    border-top:20px solid #ff9600;
}
其它类似信息

推荐信息