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