CSS之画常见的图形-编程知识

CSS之画常见的图形

1.三角形

  .shape {width: 0;height: 0;border-top: 100px solid rgba(0, 0, 0, 0);border-right: 100px solid rgba(0, 0, 0, 0);border-bottom: 100px solid blue;border-left: 100px solid rgba(0, 0, 0, 0);}

在这里插入图片描述

使用border属性实现。宽高设置为0，border里其中一个方向设置为想要的颜色，其他的设置为完全透明的颜色。

2. 正方形

  .shape {width: 100px;height: 100px;background-color: lightcoral;}

在这里插入图片描述
正方形都会画，纯属占个位子。。

3. 五边形

 .shape {width: 100px;height: 100px;background-color: blue;clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);}

在这里插入图片描述

clip-path 属性用于创建一个正五边形的形状。polygon函数接收一系列的点来定义形状的边界。每对百分比值代表一个顶点的位置相对于元素本身的宽和高的百分比。该形状的顶点顺序是从正五边形的顶点开始，然后沿逆时针方向定义其余顶点。clip-path属性在不同的浏览器中的支持程度可能不同，特别是在一些老旧的浏览器版本中可能无法正常工作。建议使用SVG来实现。

4. 六角形

 .shape {width: 0;height: 0;margin: 66px auto;border-top: 30px solid transparent;border-left: 30px solid transparent;border-right: 30px solid transparent;border-bottom: 30px solid red;}.shape::after {content: "";width: 0;height: 0;border-top: 30px solid red;border-left: 30px solid transparent;border-right: 30px solid transparent;border-bottom: 30px solid transparent;margin: 126px auto;position: absolute;top: -20px;left: calc(50% - 30px);}

在这里插入图片描述

原理同三角形，使用两个三角形拼接的。

5. 圆形

 .circle-one {width: 80px;height: 80px;background-color: lightcoral;border-radius: 50%;}

在这里插入图片描述
圆形设置下border-radius为宽高的一半或者50%就可以了。

6. 平行四边形

.shape {width: 120px;height: 100px;margin: 50px auto;background-color: lightgoldenrodyellow;-webkit-transform: skew(30deg);-moz-transform: skew(30deg);-ms-transform: skew(30deg);-o-transform: skew(30deg);transform: skew(30deg);}

在这里插入图片描述
skew(30deg)沿着X轴倾斜30度。

7. 梯形

  .shape {width: 80px;height: 80px;background-color: transparent;border-top: 20px solid transparent;border-right: 20px solid transparent;border-bottom: 20px solid blue;border-left: 20px solid transparent;margin: 50px auto;}

在这里插入图片描述
和画三角形差不多，不同的是设置宽高。

8. 椭圆

 .oval {width: 100px;height: 80px;background-color: lightcoral;margin: 50px auto;border-radius: 50%;}

在这里插入图片描述

同圆形，宽高值不一样。

9. 菱形

 .shape {width: 100px;height: 100px;margin: 50px auto;background-color: lightgoldenrodyellow;-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);-ms-transform: rotate(-45deg);-o-transform: rotate(-45deg);transform: rotate(-45deg);-webkit-transform-origin: 0 100%;-moz-transform-origin: 0 100%;-ms-transform-origin: 0 100%;-o-transform-origin: 0 100%;transform-origin: 0 100%;}

在这里插入图片描述
元素沿顺时针方向旋转45度。负值表示逆时针旋转。
transform-origin: 0 100%; 0 100%元素的左下角为变换的原点。