画圆，半圆，四分之一圆以及三角形

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

圆形代码：

.circular{

width:200px;

height:200px;

border-radius:50%;

background:red;

}

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

半圆形代码：

.semicircle{

width:200px;

height:100px;

border-radius:100px 100px00;

background:red;

}

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

四分之一圆的代码：