css绘制三⾓形、梯形及梯形带圆⾓
这⾥使⽤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;
border radius什么意思
}
这时三⾓形效果便出来了，绘制三⾓形的原理思路也清晰了。
绘制单个三⾓形是：设置某个⽅向的border尺⼨及⾊值，相邻⽅向的border设置尺⼨，⾊值设置透明，对⾓⽅向的border不设置。设置不同⽅向的border能绘制出不同朝向的三⾓形；
设置某⽅向border的尺⼨及相邻⽅向的border尺⼨，能组合成各种类型的三⾓形。
如下所⽰
.ex-grid{
position: fixed;
width:0;
height: 0;
border: 100px solid #6c9;
border-left-color:turquoise;
border-right-color: transparent;
border-bottom-color: transparent;
border-top-color: transparent;
}
.ex-grid{
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid rgb(105, 206, 46);
}
.ex-grid{
position: fixed;
width:0;
height: 0;
border-top: 100px solid rgb(56, 190, 38);
border-right: 100px solid transparent;
}
.ex-grid{
position: fixed;
width:0;
height: 0;
border-left: 150px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid rgb(94, 255, 0);
}
绘制梯形
绘制梯形依然是使⽤到border和尺⼨⾊值特性，再搭配元素⾃⾝宽⾼属性。
.ex-grid{
position: fixed;
width:100px;
height: 0;
border-top: 80px solid rgb(52, 85, 231);
border-right: 40px solid transparent;
}
.ex-grid{
position: fixed;
width:100px;
height: 0;
border-width:0 37px 100px 37px;
border-style:none solid solid;
border-color:transparent transparent rgb(86, 94, 209);
}
带圆⾓梯形制作
下⾯这个是带有圆⾓的梯形，实现这种除了图⽚之外，⽤到了perspective。perspective属性定义3D元素距视图的距离，以像素为单位。
<div class="ex-grid"></div>
.ex-grid{
position: fixed;
top: 10rem;
left: 4rem;
width: 2rem;
height: 8rem;
background-color: #3d3d3d;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
transform:perspective(20px)rotateX(0deg)rotateY(8deg)translateZ(0);
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。