作为画圆是一项前端css的基本功了，画圆的思路是设置长和宽相等，那么呈现出来的是一个正方形，其次再让正方形的边框弧度为百分之五十，就可以变为圆形了，或者如果写成和设置的长和宽一半的长度的话，也是可以的。
代码语言：javascript复制圆形代码： <div class="circular"></div>
.circular {
width: 200px;
height: 200px;
border-radius: 50%;
background: red;
}那么我稍微再改变一下，如果我们要画个半圆，那么思路是什么呢？就比如说，我们现在画个上半圆，那么我们就只要把长不变，高变为长的一般，此时就变为了一个长方形，border-radius的四个值，分别表示左上角、右上角、右下角、左下角，所以我们知道这个之后，就可以通过改变左上角和右上角的弧度让它们为高的长度，让右下角和左下角为0，那么就能画出我们所需要的上半圆了。
代码语言：javascript复制半圆形代码： <div class="semicircle"></div>
.semicircle {
width: 200px;
height: 100px;
border-radius: 100px 100px 0 0;
background: red;
}由此，我们继续深入，如果是四分之一圆，我们能否实现，首先的思路就是，我们设置的长和宽都是之前设置的一半，这样做的原因，你可以理解为之前的圆的四分之一，不就是长和宽各一半么，如果你想要的是左上角为半圆，只要改变左上角的弧度和半径一样，其他三个角为0，就可以了。
代码语言：javascript复制四分之一圆的代码：<div class="quarterCircle"></div>
.quarterCircle {
width: 100px;
height: 100px;
border-radius: 100px 0 0 0;
background: red;
}最后一个就是面试经常被问到的题目，画一个三角形，我的思路就是通过transparent，来实现，transparent的解释是透明色，那么我们可以想一下，如果我们的长和宽都是0的话，我们可以通过边框的粗细来填充长和宽，相当于就是把它们撑开，那么又变得简单起来了，如果我让底下的边框宽度设置为100px，那么是不是就可以认为高就是100px，那么我们再加个颜色-红色，就相当于是一个为红色的矩形，之后，我们设置左右的边框宽度也为100px，并且颜色为透明色，掩盖掉之后，就能变为我们想要的三角形。
代码语言：javascript复制三角形的代码：<div class="triangle"></div>
.triangle {
width: 0px;
height: 0px;
border-bottom: 100px solid red;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
}
