CSS画图形总结

╰半夏微凉° 2022-09-30 06:47 195阅读 0赞

**三角形：**

![Center][]

\#shape \{

width:0;

height:0;

border-left: 50px solid black;

border-right: 70px solid black;

border-top: 50px solid red;

border-bottom: 100px solid red;

这里width，height设为0，则元素理解为一个小圆点

\#triangle \{

width:0;

height:0;

border-left: 50px solid transparent;//黑色变为透明

border-right: 70px solid transparent;

border-bottom: 100px solid red;

![Center 1][]

**梯形：**

首先看这段代码的效果

![Center 2][]

\#shape \{

width:100px;

height:0;

border-left: 50px solid black;

border-right: 50px solid black;

border-top: 100px solid red;

border-bottom: 100px solid red;

height为0，width不为0，元素理解为一条线。

梯形：

\#trapezoid \{

width:100px;

height:0;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

border-bottom: 100px solid red;

![Center 3][]

**平行四边形：**

\#parallelogram \{

width: 150px;

height: 100px;

margin-left:20px;

\-webkit-transform: skew(20deg); //倾斜20deg

background: red;

![Center 4][]

**椭圆形：**

\#oval \{

width: 200px;

height: 100px;

background: red;

border-radius: 100px / 50px; //用“/”隔开表示水平半径100px,垂直半径50px

![Center 5][]

**圆形：**

\#circle\{

width:100px;

height:100px;

border-radius:50px;

background:red;

![Center 6][]

**3/4圆：**

\#shape\{

width:0;

height:0;

border-radius:50px;

border-top:50px solid red;

border-left:50px solid yellow;

border-right:50px solid black;

border-bottom:50px solid blue;

![Center 7][]

把缺的那块颜色设置为透明即为3/4圆

**圆环：**

\#ring\{

width:100px;

height:100px;

border-radius:70px;

border:20px solid black;

background: transparent;

![Center 8][]

**六角星：**

\#six \{

width: 0;

height: 0;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

border-bottom: 100px solid red;

position: relative;

\#six:after \{

width: 0;

height: 0;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

border-top: 100px solid black;

position: absolute;

content: "";

//top: 30px;

//left: -50px;

![Center 9][]

把伪元素after下移30px，左移50px，颜色换为红色，则可得到红色的六角星

![Center 10][]

**五角星：**

\#five-stars \{

margin-left:100px;

width: 0;

height: 0;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

border-bottom: 150px solid red;

position: relative;

\} //红色等腰三角形

\#five-stars:before\{

position: absolute;

width: 0;

height:0;

border-left: 50px solid transparent;

border-right:50px solid transparent;

border-bottom: 50px solid blue;

content: "";

top: 100px;

left: -50px;

\}//蓝色等腰三角形

\#five-stars:after\{

position: absolute;

width: 0;

height:0;

border-left: 80px solid transparent;

border-right:80px solid transparent;

border-top: 50px solid black;

content: "";

top: 50px;

left: -80px;

\}//黑色倒置三角形

![Center 11][]

将蓝色换成白色，黑色换成红色，即为红色五角星

![Center 12][]

**爱心：**

\#heart \{

position: relative;

width: 100px;

height: 90px;

\#heart:before

position: absolute;

content: "";

left: 50px;

top: 0;

width: 50px;

height: 80px;

background: red;

border-radius: 25px 25px 0 0;

transform: rotate(-45deg);

transform-origin: 0 100%;

\#heart:after \{

position: absolute;

content: "";

left: 0;

top: 0;

width: 50px;

height: 80px;

background: black;

border-radius: 25px 25px 0 0;

transform: rotate(45deg);

transform-origin :100% 100%;

![Center 13][]

利用伪元素画两个如下所示的图形，然后黑色的以右下角为圆心，顺时针转45度；红色以左下角为圆心，逆时针转45度。合成一个爱心。

![Center 14][]

[Center]: /images/20220708/62ed97ba79344802a04eb2d2410cd781.png
[Center 1]: /images/20220708/3fad0d4f73814d8695d2171fafee33b3.png
[Center 2]: /images/20220708/a0893a6b643b4e608f922527357dc57b.png
[Center 3]: /images/20220708/171d42506ccc42c4ac4a0b3d500ac67e.png
[Center 4]: /images/20220708/aa23f1952e914518af241a88bb269ce9.png
[Center 5]: /images/20220708/131c3fb512e44284a9aa2ee427453f73.png
[Center 6]: /images/20220708/b74f0c4edef44b99aaeaa7597aa4d074.png
[Center 7]: /images/20220708/1c23d0b2f62c4a07b00a80995d4be629.png
[Center 8]: /images/20220708/926cd2839f434814ba83ccabb261cc14.png
[Center 9]: /images/20220708/7fc61240e822496b9d7578387fba5699.png
[Center 10]: /images/20220708/5247dda537184b9694652f27682de9e3.png
[Center 11]: /images/20220708/91756467f9b5441ab815e10cf0d79e2e.png
[Center 12]: /images/20220708/e82e77fc41a545759a667a2b759d76b2.png
[Center 13]: /images/20220708/bb0fdb43c51d493ab6c6b08c6063df31.png
[Center 14]: /images/20220708/77ba3f60d3ea491d94bfbe83235da957.png