CSS-绘制各种基本图形

2017-12-26 本文已影响37人魏永_Owen_Wei

最近被问到如何用CSS绘制一个圆，解决这个问题的同时引发了我对CSS绘制图形的兴趣。今天汇总一下CSS绘制的各种基本图形。

1.正方形

正方形是最简单的图形了，只需要宽高一致就可以绘制出来。

// css
.square{
            width: 100px;
            height: 100px;
            border: 1px solid black;
        }

//html
<div class = "square"></div>

正方形

2.圆形

圆形主要用到了border-radius属性。该属性可以控制圆角的形状。该属性是四个属性的集合，和padding类似。

举个栗子：

border-radius: 2px;

等同于：

border-top-left-radius:2px;
border-top-right-radius:2px;
border-bottom-right-radius:2px;
border-bottom-left-radius:2px;

//css
.circle{
            width: 100px;
            height: 100px;
            border-radius: 50%;
            border: 1px solid  black;
        }
//html
<div class="circle"></div>

圆形

3.椭圆形

椭圆形也是利用了border-radius属性，只是使用了两个值分别指定x轴和y轴的弯曲情况。

 border-radius: 50% / 50%;

前一个值指定x轴，后一个值指定y轴。如果第二个值为空会使用第一个值。利用这两个值可以画出不同曲率的椭圆。

//css 
.oval{
            width: 150px;
            height: 100px;
            border-radius: 75px / 50px;
            border: 1px solid black;
        }
//html
<div class="oval"></div>

椭圆

4.普通三角形

利用transparent设置两条边框为透明，一条有边框。最后的一条边不设置宽度，就形成了三角形。说着糊涂，直接show code：

//css
.triangle{
            width: 0;
            height: 0;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
            border-bottom: 50px solid red;
        }
//html
<div class="triangle"></div>

三角形
利用这种方式可以绘制出各种方向的三角形，包括直角三角形。具体用法可以参考http://www.jb51.net/article/42513.htm

5.等边三角形

思路是利用三个div的边框来拼成一个三角形，只需要调整好左右两个div的旋转角度，就能生成一个等边三角形。后来发现可以使用伪类来实现三个div的效果。代码如下：

// css
.box{
            border-bottom:1px solid #030303;
            width:100px;
            height:100px;
            margin: 0 auto;
            box-sizing: border-box;
            position: relative;
        }
        .box:before,.box:after{
            content:"";
            display: block;
            width:100px;
            height:100px;
            box-sizing: border-box;
            position: absolute;
        }
        .box:before{
            border-left:1px solid #030303;
            transform-origin: left bottom;
            transform: rotate(30deg);
        }
        .box:after{
            border-bottom:1px solid #030303;
            transform: rotate(60deg);
            transform-origin: right bottom;
        }

//html
<div class="box"></div>

等边三角形

6.平行四边形

一种思路是使用一个矩形的div和两个三角形拼接来形成平行四边形，当然可以使用伪类，这样就不用使用三个元素了。

另一种是使用skew属性。

举个栗子：

//css 
.parallelogram {
            display: inline-block;
            padding: 50px 100px;
            border: 1px solid black;
            transform: skew(-20deg);
        }
//html
<div class="parallelogram"></div>

平行四边形

关于CSS绘制简单图形就先说到这里，如果以后有其他有意思的图形或者绘制方式再和大家分享~~