首页 > web前端 > html教程 > 巧妙用css border属性实现规则图形_html/css_WEB-ITnose

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

WBOY
发布: 2016-06-24 11:52:59
原创
1026 人浏览过

首先:一个例子:

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

}



来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板