可见CSS可以绘制很多形状，三角形、梯形、圆形、椭圆形等，不仅仅是矩形可以绘制。让我们看看如何实现这些形状。为了便于理解，文章分为基本形和组合形。基本形状比较容易实现，通过这些基本形状的组合可以实现稍微复杂一点的组合形状。基本形状triangle.triangle{width:0;高度：0；边框：50px纯蓝色；/*通过改变边框的颜色，可以改变三角形的方向*/border-color:bluetransparenttransparenttransparent;}Viewexampletrapezoid.trapzoid{width:40px;高度：100px；边框：50px纯蓝色；border-color:transparenttransparentbluetransparent;}看例子circle.circle{width:100px;高度：100px；边界半径：50%；背景：蓝色；}参见示例sphere.sphere{height:200px;宽度：200px；边界半径：50%；背景：径向渐变（圆圈在70px70px，#5cabff，#000）；}参见示例ellipse.ellipse{width：200px;高度：100px；边界半径：50%；背景：蓝色；}查看示例半圆。半圆{宽度：50px；高度：100px；/*"/"前四个值表示圆角的水平半径，后四个值表示圆角的垂直半径*/border-radius:200%00200%/100%00100%；/*效果与使用%*/相同/*border-radius:50px0050px;*/background:blue;}参见示例菱形{width:200px;高度：200px；变换：rotateZ(45deg)skew(30deg,30deg);背景und:blue;}Viewexamplecompositeshapeheart心形是由两个圆和一个矩形组合而成。heart{width:100px;高度：100px；变换：旋转Z（45度）；背景：红色；}。心::之后，.心::之前{内容：“”；宽度：100%；高度：100%；边界半径：50%；显示：块；背景：红色；位置：绝对；顶部：-50%；left:0;}.heart::before{top:0;left:-50%;}看一个扇形的例子一个扇形是由一个圆形和一个矩形组合而成的，用矩形覆盖一部分圆形形成扇形。.sector{宽度：142px；高度：142px；背景：#fff；边界半径：50%；背景图像：线性渐变（向右，透明50%，#6550）；}.sector::before{content:'';显示：块；左边距：50%；高度：100%；宽度：100%；背景色：继承；rotate(230deg);}查看示例五边形五边形是三角形和梯形的组合。.pentagonal{宽度：100px；位置：相对；边框宽度：105px50px0；边框样式：实心；border-color:bluetransparent;}.pentagonal:before{内容："";;高度：0；顶部：-185px；左：-50px；边框宽度：0px100px80px；边框样式：实心；边框颜色：透明透明蓝色；三角形和矩形的组合。.hexagon{宽度：200px;高度：100px；背景色：蓝色；位置：相对；}.hexagon:before{内容：“”；位置：绝对；顶部：-60px；左：0；宽度：0；高度：0；左边框：100px实心透明；border-right:100pxsolidtransparent;border-bottom:60pxsolidblue;}.hexagon:after{content:"";左：0；宽度：0；高度：0；底部：-60px；位置：绝对；左边框：100px实心透明；border-right:100pxsolidtransparent;border-top:60pxsolidblue;}查看示例Cuboid长方体是由六个矩形组合而成。.cuboid{宽度：200px；高度：200px；变换样式：保留3d；变换：旋转X（-30度）旋转Y（-80度）；}.cuboiddiv{位置：绝对；宽度：200px；高度：200px；不透明度：0.8；transition:.4s;}.cuboid.front{transform:rotateY(0deg)translateZ(100px);背景：#a3daff;}.cuboid.back{变换：translateZ(-100px)rotateY(180deg);背景：#a3daff;}.cuboid.left{变换：rotateY(-90deg)translateZ(100px);背景：#1ec0ff;}.cuboid.right{变换：rotateY(90deg)translateZ(100px);背景：#1ec0ff;}.cuboid.top{变换：rotateX(90deg)translateZ(100px);背景：#0080ff；}.cuboid.bottom{变换：rotateX(-90deg)translateZ(100px);背景：#0080ff;
