css绘制各种形状

时间：2023-03-31 12:40:14 CSS

我们在写前端代码的时候，经常会遇到各种形状图形（比如：边框对话框、三角形、平行四边形、圆角边框、圆形、四片叶子、花瓣等），此外除了使用背景图片（csssprite或csssprite+定位参考）和插入img图片，我们还可以使用css边框、圆角（border-radius）、渐变和定位方式结合使用，绘制出各种形状的图形。1.Solidcircle.circle{width:120px;高度：120px；背景：#317ef3；border-radius:100%;}2.Ring(空心圆).ring{width:120px;高度：120px；边框：10px实心#317ef3；边界半径：100%；box-sizing:border-box;}3,semicircle//uppersemicircle.top-semicircle{width:120px;高度：60px；背景：#317ef3；边框半径：60px60px00；/*顺时针，四个值分别代表左上、右上、右下、左下*/}//右半圆.rt-semicircle{width:60px;高度：120px；背景：#317ef3；border-radius:060px60px0;}//leftsemicircle.lf-semicircle{width:60px;高度：120px；背景：#317ef3；border-radius:60px0060px;}//bottomsemicircle.bot-semicircle{width:120px;高度：60px；背景：#317ef3；border-radius:0060px60px;}四分之一圆（扇区）.toplf-sector,.toprt-sector,.botlf-sector,.botrt-sector{width:60px;高度：60px；背景：#317ef3;}.toprt-sector{border-radius:60px000;}.toplf-sector{border-radius:060px00;}.botlf-sector{border-radius:0060px0;}.botrt-sector{border-radius:00060px;}heart.love{width:100px;高度：100px；背景：#317ef3；位置：相对；变换：旋转（45度）；-webkit变换：旋转（45度）；-moz变换：旋转（45度）；-o-transform:rotate(45deg);}.love::before,.love:after{content:"";背景：#317ef3；position:absolute;}.love:after{width:50px;高度：100px；背景：#317ef3；边界半径：50px0050px；右：99px；top:0;}.love::before{宽度:100px;高度：50px；边框半径：50px50px00；底部：99px；left:0;}Pac-Man.eat示意图{width:0;高度：0；边框：60px实心#317ef3；边界半径：100%；border-right-color:transparent;}值得注意的是，如果右边框的颜色设置为白色，那么右边会有一条蓝色的线egg.egg{width:100px;高度：150px；背景：#317ef3；border-radius:50px50px50px50px/90px90px60px60px;}这是原理图：Ellipse.ellipse1{width:180px;高度：120px；背景：#317ef3；边界半径：100%；/*边框半径：90px/60px；*/}.ellipse2{宽度：120px；高度：180px；背景：#317ef3；边界半径：100%；/*边框半径：60px/90px；*/}胶垫.capsule1{width:200px;高度：100px；背景：#317ef3；border-radius:50px;}.capsule2{width:100px;高度：200px；背景：#317ef3；border-radius:50px;}太极八卦阵图.taiji{width:120px;高度：60px；背景：#fff；边框：2px实心#317ef3；border-bottom:60pxsolid#317ef3;边界半径：100%；position:relative;}.taiji::before,.taiji::after{content:"";位置：绝对；宽度：20px；高度：20px；border-radius:100%;}.taiji::before{left:0;顶部：50%；背景：#fff；border:20pxsolid#317ef3;}.taiji::after{right:0;顶部：50%；背景：#317ef3；border:20pxsolid#fff;}叶子（花瓣）.leaf1{width:100px;高度高度：100px；背景：#317ef3；border-radius:0100px;}.leaf2{width:100px;高度：100px；背景：#317ef3；border-radius:80px0px;}.leaf3{width:100px;高度：100px；背景：#317ef3；border-radius:50px50px050px;}五叶花瓣

.five-petal{width:160px;height:160px;}.five-petalspan{display:block;宽度：80px；高度：80px；背景：#317ef3；边界半径：0100px；变换原点：100%100%；position:absolute;}.five-petal.petal2{transform:rotate(72deg);}.five-petal.petal3{transform:rotate(144deg);}.five-petal.petal4{transform:rotate(216deg);}.five-petal.petal5{transform:rotate(288deg);}四叶草

.四叶{宽度：210px；高度：210px；position:relative;}.four-leafspan{display:block;宽度：100px；高度：100px；背景：#317ef3；position:absolute;}.four-leafspan.leaf1{left:0;顶部：0；border-radius:50px50px050px;}.four-leafspan.leaf2{right:0;顶部：0；border-radius:50px50px50px0;}.four-leafspan.leaf3{left:0;底部：0；border-radius:50px050px50px;}.four-leafspan.leaf4{right:0;底部：0；border-radius:050px50px50px;}无穷符号

.infinite{宽度：250px;position:relative;}.infinitespan{width:100px;高度：100px；背景：#fff；边框：2px实心#317ef3；position:absolute;}.infinite.lf{border-radius:50px50px050px;变换：旋转（-45deg）；left:0;}.infinite.rt{border-radius:50px50px50px0;变换：旋转（45度）；right:0;}小尾巴.xwb1{width:100px;高度：60px；border-top:20pxsolid#317ef3;边界半径：060px00;}.xwb2{宽度：100px;高度：60px；左边框：20pxsolid#317ef3；border-radius:60px000;}月亮.moon{width:100px;高度：100px；border-left:30pxsolid#317ef3;border-radius:50px0050px;}立球型.litiqiuxing1{width:100px;高度：100px；边界半径：100%；背景：#317ef3；背景：径向渐变（圆圈在25%35%，#fff，#317ef3，#071529）；}。litiqiuxing2{width:100px;高度：100px；边界半径：100%；背景：#317ef3；背景：径向渐变（顶部圆圈，#fff，#317ef3，#071529）}.litiqiuxing3{width：100px;高度：100px；边界半径：100%；背景：#317ef3；background:radial-gradient(circleatlefttop,#fff10%,#78a8f230%,#0b59ca60%,#04409a80%,#202b3a100%)}三角形现实原理.triangle-shiyi{width:0;高度：0；边框：50px实心#317ef3；左边框颜色：红色；边框顶部颜色：海蓝宝石；border-right-color:bisque;}等腰直角三角.dbzj-sanjiao1{width:0;高度：0；border-bottom:100pxsolid#317ef3;border-right:100pxsolidtransparent;}.dbzj-sanjiao2{width:0;高度：0；border-bottom:100pxsolid#317ef3;border-left:100pxsolidtransparent;}.dbzj-sanjiao3{width:0;高度：0；border-top:100pxsolid#317ef3;border-right:100pxsolidtransparent;}.dbzj-sanjiao4{width:0;高度：0；border-top:100pxsolid#317ef3;border-left:100pxsolidtransparent;}.dbzj-sanjiao5{width:0;高度：0；border-bottom:50pxsolid#317ef3;左边框：100px实心透明；/*border-left、border-right决定宽度*//*border-top、border-bottom决定高度*/}.dbzj-sanjiao6{width:0;高度：0；border-bottom:50pxsolid#317ef3;border-right:100pxsolidtransparent;}.dbzj-sanjiao7{width:0;高度：0；border-bottom:100pxsolid#317ef3;border-right:50pxsolidtransparent;}.dbzj-sanjiao8{width:0;高度：0；border-bottom:100pxsolid#317ef3;border-left:50pxsolidtransparent;}.dbzj-sanjiao9{width:0;高度：0；border-top:50pxsolid#317ef3;border-right:100pxsolidtransparent;}.dbzj-sanjiao10{width:0;高度：0；border-top:50pxsolid#317ef3;border-left:100pxsolidtransparent;}锐角三角形.dbzj-sanjiao11{width:0;高度：0；博rder-left：40px实心透明；border-right:40pxsolidtransparent;border-bottom:100pxsolid#317ef3;/*三角形的宽度w=left+right,h=bottom*/}青角三角形.dbzj-sanjiao12{width:0;高度：0；border-bottom:50pxsolid#317ef3;border-right:100pxsolidtransparent;位置：相对；}.dbzj-sanjiao12::before{内容：“”；位置：绝对；左：0；顶部：0；border-bottom:50pxsolid#fff;border-right:20pxsolidtransparent;}平行四边形.pxsbx1{width:200px;高度：120px；背景：#317ef3；颜色：#fff；文本对齐：居中；行高：120px；字体大小：18px；变换：skewX(30deg);}.pxsbx2{宽度：200px;高度：120px；文本对齐：居中；行高：120px；位置：相对；字体大小：18px；颜色：#fff；}.pxsbx2::after{内容：“”；位置：绝对；左：0；顶部：0；z-指数：-1；宽度：200px；高度：120px；背景：#317ef3；特ansform:skewX(30deg);}对比上面的平行四边形，可以看到这个图形中的文字不会倾斜，方法是在文字层后面加一个伪元素绘制平行四边形.pxsbx3{宽度：100px；高度：160px；背景：#317ef3；transform:skewY(30deg);}.pxsbx4{width:100px;高度：160px；背景：#317ef3；transform:skewY(-30deg);}梯形.tixing1{width:100px;高度：0；border-bottom:100pxsolid#317ef3;左边框：50px实心透明；border-right:50pxsolidtransparent;}.tixing2{width:100px;高度：100px；背景：#317ef3；位置：相对；}.tixing2::before{内容：“”；宽度：0；高度：0；border-bottom:100pxsolid#317ef3;border-right:50pxsolidtransparent;位置：绝对；左：100%；top:0;}边框对讲框.duihuakuang1{width:200px;高度：120px；边框：2px实心#317ef3；position:relative;}.duihuakuang1::before{content:"";位置：绝对；左：40px；顶部：92%；宽度：20px；高度：20px；border-right:2pxsolid#317ef3;border-bottom:2pxsolid#317ef3;转化米：旋转（45度）；背景：#fff;}