石头教你如何用纯CSS3绘制三角形、箭头。

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

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

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

<div class="box"></div>
 
2、把它的宽高设置为height:0px; width:0px;
 
3、设置边框border属性,用来实现三角形。
 
首先要了解border具体是怎么样的,我写了一个这样的样式,具体代码如下:
 
<!DOCTYPE html>
<html>
<head>
    <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>
</head>
<body>
<div class="box"></div>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>

</body>
</html>


截图如下:



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


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


4,实例

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

实现代码如下。


!DOCTYPE html>
<html>
<head>
    <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">	</span>}
        .box4{
            margin: 0 auto;
            width: 0px;
            height: 0px;
            border: 50px solid transparent;
            border-bottom-color: #333333;
        }
    </style>
</head>
<body>
<div class="box"></div>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>

</body>
</html>

截图如下:



从以上图形可以看出:

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

border-top-color: #2DCB70;


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

border-bottom-color: #333333;


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

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


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



郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。