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

WBOY
Freigeben: 2016-06-24 11:52:59
Original
987 Leute haben es durchsucht

首先:一个例子:

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

}



Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage