CSS画三角形、圆形、椭圆形总结

html-css09

CSS画三角形、圆形、椭圆形总结,第1张

CSS画正方形长方形很简单,本文就不说了。

一、三角形

1、CSS画等腰三角形

2、画直角三角形:

二、画圆形

注意:border-radius是width/height的一半(50%)。

画半圆:

半圆的画法是把高度设为宽度的一半,并且也只设置左上角和右上角的半径,且半径为宽度的一半。

画四分之一圆:是把高度和宽度设置为相等,只设置一个圆角,其半径等于高度或宽度。

三、画椭圆

斜杠前面的一组四个值分别表示四个角的水平半径;斜杠后面的一组四个值分别表示四个角的垂直半径。

四、平行四边形

margin-left是为了使得平行四边形可以全部在浏览器中显示出来

五、梯形

高度为0。有宽度没高度。

六、五边形、六边形

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

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

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

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