css画三角形、扇形、梯形

2023-09-18 02:54| 来源: 网络整理| 查看: 265

思路：div不设置宽高，使用border填充颜色，border争位置渲染成三角形，再删除对边border，左右两边颜色设置透明即可。

1、三角形

1、首先，不设置宽高，设置边得出结果如下图：

.container { width: 0; height: 0; border-top: 50px solid red; border-left: 50px solid yellow; border-bottom: 50px solid green; border-right: 50px solid black; }

2、删除上边border

.container { width: 0; height: 0; border-left: 50px solid yellow; border-bottom: 50px solid green; border-right: 50px solid black; }

3、左右两边颜色设置透明

.container { width: 0; height: 0; border-left: 50px solid transparent; border-bottom: 50px solid green; border-right: 50px solid transparent; }

2、扇形

扇形同理，只需要增加一个50%的圆角，三角形即可变为扇形

.container { width: 0; border-bottom: 50px solid red; border-left: 50px solid transparent; border-right: 50px solid transparent; border-radius: 50%; }

3、梯形

思路：给div一个宽度，再根据border之间的边界线是斜线，删除对边border，左右设置透明即可，相对于三角形，只是增加了一个content的宽度

.container { width: 50px; border-bottom: 50px solid red; border-left: 50px solid transparent; border-right: 50px solid transparent; }

【本文地址】

公司简介

联系我们