CSS 绘制各种形状

骑猪看日落 2022-02-19 01:01 297阅读 0赞

使用 CSS 可以绘制出许多形状，比如三角形、梯形、圆形、椭圆，等 并不只是可以绘制矩形。下面来看看怎么实现这些形状的吧。  
为了容易理解，文章分为基本形状 和 组合形状来说，基本形状是比较容易实现的，而利用这些基本形状进行组合，就可以实现稍微复杂点的组合形状了。

## 基本形状 ##

### 三角形 ###

.triangle {
        width: 0;
        height: 0;
        border: 50px solid blue;
        /* 通过改变边框颜色，可以改变三角形的方向 */
        border-color: blue transparent transparent transparent;
    }

![在这里插入图片描述][1460000018693452]

[查看示例][Link 1]

### 梯形 ###

.trapzoid {
        width: 40px;
        height: 100px;
        border: 50px solid blue;
        border-color: transparent transparent blue transparent;
    }

![在这里插入图片描述][1460000018693453]

[查看示例][Link 2]

### 圆形 ###

.circle{
        width:100px;
        height:100px;
        border-radius:50%;
        background:blue;
    }

![在这里插入图片描述][1460000018693454]

[查看示例][Link 3]

### 球体 ###

.sphere {
        height: 200px;
        width: 200px;
        border-radius: 50%;
        background: radial-gradient(circle at 70px 70px, #5cabff, #000);
    }

![在这里插入图片描述][1460000018693455_w_351_h_325]

[查看示例][Link 4]

### 椭圆 ###

.ellipse {
        width: 200px;
        height: 100px;
        border-radius: 50%;
        background: blue;
    }

![在这里插入图片描述][1460000018693456]

[查看示例][Link 5]

### 半圆 ###

.semicircle {
        width: 50px;
        height: 100px;
        /*  "/"前四个值表示圆角的水平半径，后四个值表示圆角的垂直半径*/
        border-radius: 200% 0 0 200% / 100% 0 0 100%;
    
        /* 效果和用%一样 */
        /* border-radius: 50px 0 0 50px; */
        background: blue;
    }

![在这里插入图片描述][1460000018693457]

[查看示例][Link 6]

## 菱形 ##

.rhombus {
        width: 200px;
        height: 200px;
        transform: rotateZ(45deg) skew(30deg, 30deg);
        background: blue;
    }

![在这里插入图片描述][1460000018693458_w_204_h_583]

[查看示例][Link 7]

## 组合形状 ##

### 心形 ###

心形是由两个圆形和一个矩形进行组合得到的。

![在这里插入图片描述][1460000018693459]

.heart {
        width: 100px;
        height: 100px;
        transform: rotateZ(45deg);
        background: red;
    }
    
    .heart::after,
    .heart::before {
        content: "";
        width: 100%;
        height: 100%;
        border-radius: 50%;
        display: block;
        background: red;
        position: absolute;
        top: -50%;
        left: 0;
    }
    
    .heart::before {
        top: 0;
        left: -50%;
    }

![在这里插入图片描述][1460000018693460]

[查看示例][Link 8]

### 扇形 ###

扇形是由一个圆形和一个矩形进行组合得到的，用矩形遮住圆形的一部分就形成了扇形。

![在这里插入图片描述][1460000018693461]

.sector {
        width: 142px;
        height: 142px;
        background: #fff;
        border-radius: 50%;
        background-image: linear-gradient(to right, transparent 50%, #655 0);
    }
    
    .sector::before {
        content: '';
        display: block;
        margin-left: 50%;
        height: 100%;
        width: 100%;
        background-color: inherit;
        transform-origin: left;
        /*调整角度，改变扇形大小*/
        transform: rotate(230deg);
    }

![在这里插入图片描述][1460000018693462_w_190_h_192]

[查看示例][Link 9]

### 五边形 ###

五边形是由一个三角形和一个梯形进行组合得到的。

![在这里插入图片描述][1460000018693463_w_259_h_264]

.pentagonal {
        width: 100px;
        position: relative;
        border-width: 105px 50px 0;
        border-style: solid;
        border-color: blue transparent;
    }
    
    .pentagonal:before {
        content: "";
        position: absolute;
        width: 0;
        height: 0;
        top: -185px;
        left: -50px;
        border-width: 0px 100px 80px;
        border-style: solid;
        border-color: transparent transparent blue;
    }

![在这里插入图片描述][1460000018693464_w_310_h_301]

[查看示例][Link 10]

### 六边形 ###

六边形是由两个三角形和一个矩形进行组合得到的。

![在这里插入图片描述][1460000018693465]

.hexagon {
        width: 200px;
        height: 100px;
        background-color: blue;
        position: relative;
    }
    
    .hexagon:before {
        content: "";
        position: absolute;
        top: -60px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 100px solid transparent;
        border-right: 100px solid transparent;
        border-bottom: 60px solid blue;
    }
    
    .hexagon:after {
        content: "";
        left: 0;
        width: 0;
        height: 0;
        bottom: -60px;
        position: absolute;
        border-left: 100px solid transparent;
        border-right: 100px solid transparent;
        border-top: 60px solid blue;
    }

![在这里插入图片描述][1460000018693466_w_354_h_359]

[查看示例][Link 11]

### 长方体 ###

长方体是由六个矩形进行组合得到的。

![在这里插入图片描述][1460000018693467_w_372_h_387]

.cuboid {
        width: 200px;
        height: 200px;
        transform-style: preserve-3d;
        transform: rotateX(-30deg) rotateY(-80deg);
    }
    
    .cuboid div {
        position: absolute;
        width: 200px;
        height: 200px;
        opacity: 0.8;
        transition: .4s;
    }
    
    .cuboid .front {
        transform: rotateY(0deg) translateZ(100px);
        background: #a3daff;
    }
    
    .cuboid .back {
        transform: translateZ(-100px) rotateY(180deg);
        background: #a3daff;
    }
    
    .cuboid .left {
        transform: rotateY(-90deg) translateZ(100px);
        background: #1ec0ff;
    }
    
    .cuboid .right {
        transform: rotateY(90deg) translateZ(100px);
        background: #1ec0ff;
    }
    
    .cuboid .top {
        transform: rotateX(90deg) translateZ(100px);
        background: #0080ff;
    }
    
    .cuboid .bottom {
        transform: rotateX(-90deg) translateZ(100px);
        background: #0080ff;
    }

![在这里插入图片描述][1460000018693468]

[查看示例][Link 12]

### 圆柱体 ###

圆柱体是由一个椭圆和一个圆角矩形进行组合得到的。

![在这里插入图片描述][1460000018693469]

.cylinder {
        position: relative;
        transform: rotateX(70deg);
    }
    
    .ellipse {
        width: 100px;
        height: 100px; 
        background: deepskyblue;
        border-radius: 50px;
    }
    
    .rectangle {
        width: 100px;
        height: 400px;
        position: absolute;
        opacity: 0.6;
        background: deepskyblue;
        top: 0;
        left: 0; 
        border-radius: 50px;
        z-index: -1;
    }

![在这里插入图片描述][1460000018693470]

[查看示例][Link 13]

如果使用了渐变色，看上去会更像一些。

background-image: linear-gradient(to right, rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.2) 100%);

![在这里插入图片描述][1460000018693471]

[查看示例][Link 14]

### 棱锥 ###

棱锥是由四个三角形和一个矩形进行组合得到的。

![在这里插入图片描述][1460000018693472]

.pyramid {
        width: 200px;
        height: 200px;
        transform-style: preserve-3d;
        transform: rotateX(-30deg) rotateY(-80deg);
    } 
    .pyramid div {
        position: absolute;
        top: -100px;
        width: 0px;
        height: 0px;
        border: 100px solid transparent;
        border-bottom-width: 200px;
        opacity: 0.8;
    }
    
    .pyramid .front {
        transform: translateZ(100px) rotateX(30deg);
        border-bottom-color: #a3daff;
        transform-origin: 0 100%;
    }
    
    .pyramid .back {
        transform: translateZ(-100px) rotateX(-30deg);
        border-bottom-color: #1ec0ff;
        transform-origin: 0 100%;
    }
    
    .pyramid .left {
        transform: translateX(-100px) rotateZ(30deg) rotateY(90deg);
        border-bottom-color: #0080ff;
        transform-origin: 50% 100%;
    }
    
    .pyramid .right {
        transform: translateX(100px) rotateZ(-30deg) rotateY(90deg);
        border-bottom-color: #03a6ff;
        transform-origin: 50% 100%;
    }
    
    .pyramid .bottom {
        transform: translateX(-100px) rotateZ(90deg) rotateY(90deg);
        background: cyan;
        width: 200px;
        height: 200px;
        border: 0;
        top: 0;
        transform-origin: 50% 100%;
    }

![在这里插入图片描述][1460000018693473]

[查看示例][Link 15]

## 总结 ##

文中实现的各种形状，也许你觉得实现的很复杂，其实你也可以使用 [clip-path][] 这一个属性，绘制各种形状。  
CSS 能绘制的东西，不仅仅只有这些，还有很多很多，文中都没有说出来，而即便是文中已经实现的形状也不只有一种实现方式，有兴趣的小伙伴可以继续去探索。

## 最后 ##

这里有一个使用各种形状进行组合，形成魔法阵的例子。

![在这里插入图片描述][1460000018693474_w_688_h_676]

我们还可以给魔法阵中的形状增加动画，使魔法阵看上去更有趣。

![在这里插入图片描述][1460000018693475]

转载：[https://segmentfault.com/a/1190000018693449][https_segmentfault.com_a_1190000018693449]

[1460000018693452]: /images/20220219/7a36bf646d414f15a9a133f4d2ae51d3.png
[Link 1]: https://www.kkkk1000.com/images/CSS-shape/triangle.html
[1460000018693453]: /images/20220219/4e389d45a63c4a798b4391bd70b82da8.png
[Link 2]: https://www.kkkk1000.com/images/CSS-shape/trapezoid.html
[1460000018693454]: /images/20220219/84700bb4841c47098d3569fb205dc701.png
[Link 3]: https://www.kkkk1000.com/images/CSS-shape/circle.html
[1460000018693455_w_351_h_325]: /images/20220219/78aced7174454b4990a330542cc5ce3e.png
[Link 4]: https://www.kkkk1000.com/images/CSS-shape/sphere.html
[1460000018693456]: /images/20220219/a49b6d4bfb1640da8a6f779185182360.png
[Link 5]: https://www.kkkk1000.com/images/CSS-shape/ellipse.html
[1460000018693457]: /images/20220219/a653441410e346c489785c482d525342.png
[Link 6]: https://www.kkkk1000.com/images/CSS-shape/semicircle.html
[1460000018693458_w_204_h_583]: /images/20220219/8703aada642d433991d2101ef10845b7.png
[Link 7]: https://www.kkkk1000.com/images/CSS-shape/rhombus.html
[1460000018693459]: /images/20220219/ce3026b8fe45449697b2b133f0562947.png
[1460000018693460]: /images/20220219/47206e8402de4be780296461c9f74a0f.png
[Link 8]: https://www.kkkk1000.com/images/CSS-shape/heart.html
[1460000018693461]: /images/20220219/4b16dcbcbee242f1b22c5fdd8fb28356.png
[1460000018693462_w_190_h_192]: /images/20220219/731f8a270b234b5d9704306161d3745c.png
[Link 9]: https://www.kkkk1000.com/images/CSS-shape/sector.html
[1460000018693463_w_259_h_264]: /images/20220219/bd2ff53e1bab4878811650a46b64dc51.png
[1460000018693464_w_310_h_301]: /images/20220219/8adab935745748e2b7cc551b958829e6.png
[Link 10]: https://www.kkkk1000.com/images/CSS-shape/pentagonal.html
[1460000018693465]: /images/20220219/6ec16e4bf9a8419aa42a22c061b64312.png
[1460000018693466_w_354_h_359]: /images/20220219/3914f91a8f6246409f45f95286bca8ca.png
[Link 11]: https://www.kkkk1000.com/images/CSS-shape/hexagon.html
[1460000018693467_w_372_h_387]: /images/20220219/b6679c1664024dcf80ede09bb5c65edc.png
[1460000018693468]: /images/20220219/f054ca136a49439aa8d9ad40ed6ce4e0.png
[Link 12]: https://www.kkkk1000.com/images/CSS-shape/cuboid.html
[1460000018693469]: /images/20220219/1376fb59c1494bf7a8c024fd5bb18467.png
[1460000018693470]: /images/20220219/0d9ec3893d30496595eda6888fe229a9.png
[Link 13]: https://www.kkkk1000.com/images/CSS-shape/cylinder.html
[1460000018693471]: /images/20220219/6d124074bad64ed984f4f4bf62eaddec.png
[Link 14]: https://www.kkkk1000.com/images/CSS-shape/cylinder2.html
[1460000018693472]: /images/20220219/7394b5892ae745bd97ccd72e53627d01.png
[1460000018693473]: /images/20220219/8cd290e346d24354a95ffa5fc657ee8d.png
[Link 15]: https://www.kkkk1000.com/images/CSS-shape/pyramid.html
[clip-path]: https://developer.mozilla.org/zh-CN/docs/Web/CSS/clip-path
[1460000018693474_w_688_h_676]: /images/20220219/852fd670617a4e0eade5be4a0a6cf4c1.png
[1460000018693475]: /images/20220219/6c034144689a423fb81614d354c07dcf.png
[https_segmentfault.com_a_1190000018693449]: https://segmentfault.com/a/1190000018693449