CSS绘制图形

对于接触HTML不久或不太深入的朋友们来说，制作图形可能最先想到的是canvas。但实际上单纯用CSS也可以绘制很多有意思的图形。

1. 矩形

div{
  width: 100px;
  height: 100px;
  border: 1px solid black;
  background-color: black;
}

实际上，一个div本身就是一个矩形，横平竖直，只要把想要的矩形边长通过width以及height进行定义就可以了，不要忘记加上边框 or 背景颜色，不然你可能什么都看不到。

2. 等腰直角三角形

等腰三角形的绘制方法有很多种，我来说一种我觉得很不错的方法。

.triangle{
  width: 0;
  height: 0;
  border: 100px solid transparent;
  border-bottom-color: black;
}

当我第一次看到这种方法的时候，我可以说是大吃了一惊，他让我对css的兴趣一下变得浓厚了。对于一个小白来讲，一瞬间可能不太能够理解其原理，接下来我要放一张图，帮助大家理解。

css绘制三角形原理

3. 其他方向的等腰直角三角形

.triangle{
  width: 0;
  height: 0;
  border: 90px solid transparent;
  border-left-color: green;
  border-top-width:0;
}

还是放一张图帮助理解。

其他方向的等腰直角三角形

4. 正五边形

*{
 margin:0;padding:0;
}

.pentagon{
  width: 0;
  height: 0;
  border-left: 50px solid transparent; 
  border-right: 50px solid transparent; 
  border-bottom: 38px solid red;
}
.pentagon::after{ 
  content:'';
  position: absolute;
  top:38px;
  left:0;
  width: 62px;
  border-width: 58px 19px 0 19px; 
  border-style: solid; 
  border-color: red transparent transparent transparent; 
}

这之中牵扯到一些数学问题，所以感谢好朋友@陈曦的数学支援。

正五边形

5. 太极图

.taiji {
   width: 96px;
   height: 48px;
   background: white;
   border-color: black;
   border-style: solid;
   border-width: 2px 2px 50px 2px;
   border-radius: 100%;
   position: relative;
}

.taiji:before {
   content: "";
   position: absolute;
   top: 50%;
   left: 0;
   background: white;
   border: 18px solid black;
   border-radius: 100%;
   width: 12px;
   height: 12px;
}

.taiji:after {
   content: "";
   position: absolute;
   top: 50%;
   left: 50%;
   background: black;
   border: 18px solid white;
   border-radius:100%;
   width: 12px;
   height: 12px;
}

太极图

小结

    示例4.五边形与5.太极图都用到了::after与::before伪类。伪类实际上就是一个伪元素，只不过在没有定义它的时候，它是看不见的。所有的非空标签都具有伪类，比方说<input>标签就不具有伪类。
    使用伪元素可以代替没什么卵用的非空标签，而且看起来B格甚高，通过display:block使伪元素可见。在伪元素需要使用绝对定位时，不需要写block，因为position:absolute默认会使它可见。大部分非空标签可用的基本css属性伪元素也都可以使用。