css绘制三角形、梯形及梯形带圆角

2024-06-27 17:40| 来源: 网络整理| 查看: 265

这里使用css绘制各种图形都是采用单节点的方式，未涉及多节点组合图形绘制。主要是多边形绘制，如三角形、梯形。

绘制三角形

绘制各种三角形是以css-border为基础展开，巧用border（top/bottom/left/right）的尺寸值及色值。下面看一个矩形

.ex-grid { position: fixed; width:0; height: 0; border: 100px solid #6c9; }

在这里插入图片描述这是一个矩形，没有宽高值，border100px，也就是说该矩形是由border组成。再对border进行设置：

.ex-grid { position: fixed; width:0; height: 0; border: 100px solid #6c9; border-left-color:turquoise; border-right-color: tomato; border-bottom-color: thistle; border-top-color: yellowgreen; }

在这里插入图片描述这时三角形效果便出来了，绘制三角形的原理思

【本文地址】

公司简介

联系我们