欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-04-28 17:14:09
...
首先:一个例子:

#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;

}