用CSS绘制最常见的40种形状和图形

最新推荐文章于 2024-06-18 10:00:00 发布

OREO夹心

最新推荐文章于 2024-06-18 10:00:00 发布

阅读量252

点赞数

文章标签： css

本文链接：https://blog.csdn.net/weixin_51443782/article/details/110063379

版权

本文展示了40种使用CSS绘制的图形，包括正方形、矩形、圆形、三角形等基本形状，以及梯形、平行四边形、五角星、六边形等复杂图形，甚至包括心形、无限符号、聊天泡泡等特殊形状，展现了CSS在图形设计中的强大能力。

摘要由CSDN通过智能技术生成

用CSS绘制最常见的40种形状和图形
分享：

今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形，里面有最简单的矩形、圆形和三角形，也有各种常见的多边形，甚至是阴阳太极和网站小图标，真的非常强大，分享给大家。

Square(正方形)
在这里插入图片描述

#square {
width: 100px;
height: 100px;
background: red;
}

Rectangle(矩形)
在这里插入图片描述

#rectangle {
width: 200px;
height: 100px;
background: red;
}

Circle(圆形)

#circle {
width: 100px;
height: 100px;
background: red;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}

/* 可以使用百分比值(大于50%)，但是低版本的Android不支持 */

Oval(椭圆形)

#oval {
width: 200px;
height: 100px;
background: red;
-moz-border-radius: 100px / 50px;
-webkit-border-radius: 100px / 50px;
border-radius: 100px / 50px;
}

/* 可以使用百分比值(大于50%)，但是低版本的Android不支持 */

Triangle Up(向上的三角形)

#triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}

Triangle Down(向下)

#triangle-down {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
}

Triangle Left(向左)

#triangle-left {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 100px solid red;
border-bottom: 50px solid transparent;
}

Triangle Right(向右)

40个纯CSS绘制的图形7

#triangle-right {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-left: 100px solid red;
border-bottom: 50px solid transparent;
}

Triangle Top Left(左上)

40个纯CSS绘制的图形8

#triangle-topleft {
width: 0;
height: 0;
border-top: 100px solid red;
border-right: 100px solid transparent;
}

Triangle Top Right(右上)

40个纯CSS绘制的图形9

#triangle-topright {
width: 0;
height: 0;
border-top: 100px solid red;
border-left: 100px solid transparent;
}

Triangle Bottom Left(左下)

40个纯CSS绘制的图形10

#triangle-bottomleft {
width: 0;
height: 0;
border-bottom: 100px solid red;
border-right: 100px solid transparent;
}

Triangle Bottom Right(右下)

40个纯CSS绘制的图形11

#triangle-bottomright {
width: 0;
height: 0;
border-bottom: 100px solid red;
border-left: 100px solid transparent;
}

Curved Tail Arrow(弯尾箭头)

40个纯CSS绘制的图形12

40个纯CSS绘制的图形13

#curvedarrow {
position: relative;
width: 0;
height: 0;
border-top: 9px solid transparent;
border-right: 9px solid red;
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-ms-transform: rotate(10deg);
-o-transform: rotate(10deg);
}
#curvedarrow:after {
content: “”;
position: absolute;
border: 0 solid transparent;
border-top: 3px solid red;
border-radius: 20px 0 0 0;
top: -12px;
left: -9px;
width: 12px;
height: 12px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
}