画圆、半圆、四分之一圆和三角形

作为画圆是一项前端css的基本功了，画圆的思路是设置长和宽相等，那么呈现出来的是一个正方形，其次再让正方形的边框弧度为百分之五十，就可以变为圆形了，或者如果写成和设置的长和宽一半的长度的话，也是可以的。

圆形代码： <div class="circular"></div>
.circular {
      width: 200px;
      height: 200px;
      border-radius: 50%;
      background: red;
    }

那么我稍微再改变一下，如果我们要画个半圆，那么思路是什么呢？就比如说，我们现在画个上半圆，那么我们就只要把长不变，高变为长的一般，此时就变为了一个长方形，border-radius的四个值，分别表示左上角、右上角、右下角、左下角，所以我们知道这个之后，就可以通过改变左上角和右上角的弧度让它们为高的长度，让右下角和左下角为0，那么就能画出我们所需要的上半圆了。

半圆形代码： <div class="semicircle"></div>
.semicircle {
 width: 200px;
 height: 100px;
 border-radius: 100px 100px 0 0;
 background: red;
    }

由此，我们继续深入，如果是四分之一圆，我们能否实现，首先的思路就是，我们设置的长和宽都是之前设置的一半，这样做的原因，你可以理解为之前的圆的四分之一，不就是长和宽各一半么，如果你想要的是左上角为半圆，只要改变左上角的弧度和半径一样，其他三个角为0，就可以了。

四分之一圆的代码：<div class="quarterCircle"></div>
.quarterCircle {
 width: 100px;
 height: 100px;
 border-radius: 100px 0 0 0;
 background: red;
    }

最后一个就是面试经常被问到的题目，画一个三角形，我的思路就是通过transparent，来实现，transparent的解释是透明色，那么我们可以想一下，如果我们的长和宽都是0的话，我们可以通过边框的粗细来填充长和宽，相当于就是把它们撑开，那么又变得简单起来了，如果我让底下的边框宽度设置为100px，那么是不是就可以认为高就是100px，那么我们再加个颜色-红色，就相当于是一个为红色的矩形，之后，我们设置左右的边框宽度也为100px，并且颜色为透明色，掩盖掉之后，就能变为我们想要的三角形。

三角形的代码：<div class="triangle"></div>
.triangle {
 width: 0px;
 height: 0px;
 border-bottom: 100px solid red;
 border-left: 100px solid transparent;
 border-right: 100px solid transparent;
    }