CSS绘制图形

对CSS了解越多，越觉得CSS能做很多有趣的事情。今天主要整理CSS的绘图功能。

一、绘制一个简单三角形

首先我们来绘制一个简单的三角形。
在绘制三角形之前，你要仔细想一想，对于一个div，你是否真的了解它的border-left/right/top/bottom长什么样子？

1、只存在一个边框时

// html
<body>
  <div class='triangle'></div>
</body>

//css
.triangle{
  width:100px;
  height:100px;
  background:#ddd;
  border-left:100px solid;
}

结果：

2、存在两个边框时

// html
<body>
  <div class='triangle'> </div>
</body>

//css
.triangle{
  width:100px;
  height:100px;
  background:#ddd;
  border-left:100px solid;
  border-top:100px solid red;
}

结果：

怎么样？出乎意料吗？

3、存在四个边框时

三个边框的情况请自行脑补，我们直接来看四个边框。

// html
<body>
  <div class='triangle'></div>
</body>

//css
.triangle{
  width:100px;
  height:100px;
  background:#ddd;
  border-left:100px solid;
  border-top:100px solid red;
  border-right:100px solid yellow;
  border-bottom:100px solid blue;
}

结果：

总结：边框总是会把div显示得“方方正正”，使整个div看起来不会出现棱角（除直角以外的其他角度）。

4、在四个边框的情况下，设置div宽高为0

// html
<body>
  <div class='triangle'> </div>
</body>

//css
.triangle{
  width:0;
  height:0;
  background:#ddd;
  border-left:100px solid;
  border-top:100px solid red;
  border-right:100px solid yellow;
  border-bottom:100px solid blue;
}

结果：

如上图所示，通过设置div的height和width为0 ，就可以得到由div的border绘制出的四个三角形。
我们只需设置其中三个border不可见，即可得到一个等边直角三角形。

// html
<body>
  <div class='triangle'></div>
</body>

//css
.triangle{
  width:0;
  height:0;
  background:#ddd;
  border-left:100px solid transparent;
  border-top:100px solid transparent;
  border-right:100px solid transparent;
  border-bottom:100px solid blue;
}

结果：

二、绘制太极图形

1、方案一

将太极图案分解为如下三个div：

代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>JS Bin</title>
  </head>
  <body>
    <div class='parent'>
      <div class='yang'></div> 
      <div class='yin'></div> 
    </div>  
  </body>
</html>

//css
.parent{
  width:0;
  height:300px;
  border-left:150px solid transparent;
  border-right:150px solid transparent;
  border-radius:100%;
  /* box-shadow:0 0 5px 5px #ddd; */
}
.yang,.yin{
  width:150px;
  height:150px;
  margin:000-75px;
  border-radius:50%;
  position:relative;
}
.yang{
  background:white;  
}
.yin{
  background:black;
}
.yang::after,.yin::after{
  content:'';
  display:block;
  width:50px;
  height:50px;
  border-radius:50%;
  position:absolute;
  top:50px;
  left:50px;
}
.yang::after{
  background:black;
}
.yin::after{
  background:white;
}

2、方案二

将太极图案分解为一个div，并在该div上设置“阴”和“阳”两个伪元素。这种方法只需构造一个div，更加简洁方便。
代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>JS Bin</title>
  </head>
  <body>
    <div class='parent'></div>
  </body>
</html>

//css
*{
   box-sizing:border-box;
}
.parent{
   width:300px;
   height:300px;
   border-radius:50%;
   background:linear-gradient(to right,#fff 0%,#fff 50%,#000 50%,#000 100%);
   box-shadow:0 0 10px hsla(0,0%,0%,0.25);
}
.parent::before{
   content:'';
   display:block;
   width:50px;
   height:50px;
   border:50px solid #fff;
   background:#000;
   border-radius:50%;
   margin-left:75px;  
}
.parent::after{
   content:'';
   display:block;
   width:50px;
   height:50px;
   border:50px solid #000;
   background:#fff;
   border-radius:50%;
   margin-left:75px;
}

“CSS绘制图形”就先说这么多，其实了解了原理后，这一部分还是挺简单的，无非就是利用border的一些特性、::before和::after等伪元素并使用定位来完成相应的效果。

由于个人水平有限，博客错误之处，烦请指正！