Heim >Web-Frontend >HTML-Tutorial >石头教你如何用纯CSS3绘制三角形、箭头。_html/css_WEB-ITnose

石头教你如何用纯CSS3绘制三角形、箭头。_html/css_WEB-ITnose

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

经常在有些网站上看到一些三角图形,但通常这些都是图片,现在石头就教你如何用纯css3技术来绘制三角图形。

下面是具体步骤,把这些看一遍你也就懂得怎样来绘制三角形、箭头了。

1、新建一个元素,随便什么元素,不过我习惯性的会用块元素来做。如果行内元素就display:block它。


 
2、把它的宽高设置为height:0px; width:0px;
 
3、设置边框border属性,用来实现三角形。
 
首先要了解border具体是怎么样的,我写了一个这样的样式,具体代码如下:
 
    <meta charset="utf-8">    <title>绘制三角形</title>    <style>        .box{            margin: 20px auto;//设置图形居中            width: 0px;            height: 0px;            border: 50px solid transparent;            border-top-color: #2DCB70;            border-right-color:gold;            border-bottom-color: #333333;            border-left-color: red;        }    </style><div class="box"></div><div class="box1"></div><div class="box2"></div><div class="box3"></div><div class="box4"></div>


截图如下:



这就相当于分别把四个边框向正方形的中心拉伸。


上面的代码出现4个三角形合并成一个正方形。到这里就很清晰了,只要把想要的保留,其它的设置为透明就可以达到三角形的效果,


4,实例

分别绘制向下,向右,向左向上的三角形。

实现代码如下。


!DOCTYPE html>    <meta charset="utf-8">    <title>绘制三角形</title>    <style>        .box{            margin: 20px auto;            width: 0px;            height: 0px;            border: 50px solid transparent;            border-top-color: #2DCB70;            border-right-color:gold;            border-bottom-color: #333333;            border-left-color: red;        }        .box1{            margin: 5px auto;            width: 0px;            height: 0px;            border: 50px solid transparent;            border-top-color: #2DCB70;        }        .box2{            margin: 5px auto;            width: 0px;            height: 0px;            border: 50px solid transparent;            border-left-color: red;        }        .box3{            margin: 5px auto;            width: 0px;            height: 0px;            border: 50px solid transparent;            border-right-color:gold;      <span style="white-space:pre">	}</style>
        .box4{            margin: 0 auto;            width: 0px;            height: 0px;            border: 50px solid transparent;            border-bottom-color: #333333;        }    <div class="box"></div><div class="box1"></div><div class="box2"></div><div class="box3"></div><div class="box4"></div>

截图如下:



从以上图形可以看出:

绘制向下的三角形箭头,就相当于将上边框向下拉伸。

border-top-color: #2DCB70;


绘制向上的三角形箭头,就相当于将下边框向上拉伸。

border-bottom-color: #333333;


绘制向左的三角形箭头,就相当于将右边框向左拉伸。

绘制向右的三角形箭头,就相当于将左边框向右拉伸。


看完上面的你也就学会用CSS绘制三角形箭头了。



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