Heim >Web-Frontend >HTML-Tutorial >巧妙用css border属性实现规则图形_html/css_WEB-ITnose

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

WBOY
WBOYOriginal
2016-06-24 11:52:591014Durchsuche

首先:一个例子:

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

}



Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn