如何在 CSS 中创建形状

野性酷女 2023-09-28 08:19 146阅读 0赞

在今天的教程中，让我们创建一个可以使用 CSS3 创建的最常见形状的简单列表。我们将通过文章取得进展，最后，您将学习如何创造真正伟大的东西。

本教程将让您深入了解 CSS3 形状以及如何自己创建它们。它涵盖了多种形状，可以真正加快您的网站速度，因为对图像的需求将会减少。让我们开始！

--------------------

**如果您正在寻找 SVG 的介绍，请查看这篇文章：[如何使用 SVG 创建简单形状][SVG]。**

### **完成本教程需要什么** ###

*  CSS3的知识
 *  时间和耐心

### **创建一个 CSS 圆圈** ###

![2f2092229465d3e0594aab66fa6a6985.png][]

**HTML**

要在 CSS 中创建一个圆圈，首先我们需要一个 div 并给它一个形状的 ID 名称。因此，对于本示例，将 circle 设置为 ID 名称。

**CSS**

对于 CSS，只需输入一个宽度和高度，然后给它一个宽度和高度一半的边框半径。

#circle {
        width: 120px;
        height: 120px;
        background: #7fee1d;
        -moz-border-radius: 60px;
        -webkit-border-radius: 60px;
        border-radius: 60px;
    }

### **创建一个 CSS 正方形** ###

![5af20849a81c8689813c6ffd5db7d677.png][]

**HTML**

要在 CSS 中创建方形，就像圆形一样，我们需要一个 div 并给它一个形状的 ID 名称。因此，对于本示例，将 square 设置为 ID 名称。

**CSS**

对于正方形的 CSS，只需设置一个相等的宽度和高度，并提供一个使其看起来可见的值。

#square {
        width: 120px;
        height: 120px;
        background: #f447ff;
    }

### **创建一个 CSS 矩形** ###

![630a3a105a6aa2e70e2ab1e69d110228.png][]

**HTML**

要创建一个矩形 CSS 形状，就像方形形状一样，设置一个 ID 名称为 rectangle 的 div。

**CSS**

就像正方形一样，我们将放置一个简单的宽度，但这次大于高度。

#rectangle {
        width: 220px;
        height: 120px;
        background: #4da1f7;
    }

### **创建一个 CSS 椭圆** ###

![86b24ff924725d5a590c8ccaf254b985.png][]

**HTML**

要在 CSS 中创建一个椭圆形，请创建一个 ID 名为椭圆形的 div。

**CSS**

椭圆形与圆形几乎相似；然而，椭圆的形状是矩形的，需要的半径是高度的一半。

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

### **创建一个 CSS 三角形** ###

![e79dc17b706968cf4320f0e410ffa15f.png][]

**HTML**

为了在 CSS 中创建一个三角形，再次设置一个 ID 名称为 triangle 的 div。

**CSS**

要创建三角形，请操作边框属性。操纵边框的宽度会给你在旋转角度上不同的结果。

#triangle {
        width: 0;
        height: 0;
        border-bottom: 140px solid #fcf921;
        border-left: 70px solid transparent;
        border-right: 70px solid transparent;
    }

### **创建一个向下的 CSS 三角形** ###

![ac3a07b4a3b5892175c7219d8f83bf9d.png][]

**HTML**

要使用 CSS 创建倒三角形，请再次创建一个 ID 名称为 triangle\_down 的 div。

**CSS**

创建一个倒三角形，我们需要操作底部的边框属性。

#triangle_down {
        width: 0;
        height: 0;
        border-top: 140px solid #20a3bf;
        border-left: 70px solid transparent;
        border-right: 70px solid transparent;
    }

### **创建一个左侧的 CSS 三角形** ###

![cc82b843d6b9536410d2a600b3d1bd9c.png][]

**HTML**

要创建一个朝左的三角形，请再次设置一个 ID 名称为 triangle\_left 的 div。

**CSS**

创建一个朝左的三角形，操纵右侧的边框属性。

#triangle_left {
        width: 0;
        height: 0;
        border-top: 70px solid transparent;
        border-right: 140px solid #6bbf20;
        border-bottom: 70px solid transparent;
    }

### **创建一个右侧的 CSS 三角形** ###

![c27497cfbc583ec6d0cbe26b387a517a.png][]

**HTML**

为了创建一个朝右的三角形，设置一个 ID 名称为 triangle\_right 的 div。

**CSS**

创建一个朝左的三角形，操纵左侧的边框属性。

#triangle_right {
        width: 0;
        height: 0;
        border-top: 70px solid transparent;
        border-left: 140px solid #ff5a00;
        border-bottom: 70px solid transparent;
    }

### **创建 CSS 菱形** ###

![94b7eda0d45f31ef840b102b028face9.png][]

**HTML**

要使用 CSS 创建菱形，请提供 ID 名称为 diamond 的 div。

**CSS**

创建钻石可以通过多种方式展示。使用 transform 属性和旋转值将能够显示两个相邻的三角形。

#diamond {
        width: 120px;
        height: 120px;
        background: #1eff00;
    /* Rotate */
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg);
    /* Rotate Origin */
        -webkit-transform-origin: 0 100%;
        -moz-transform-origin: 0 100%;
        -ms-transform-origin: 0 100%;
        -o-transform-origin: 0 100%;
        transform-origin: 0 100%;
        margin: 60px 0 10px 310px;
    }

### **创建 CSS 梯形** ###

![0ac2a5fdbb8dbacdaf9e6479ed4e8cb7.png][]

**HTML**

为了使用 CSS 创建一个梯形形状，请设置一个 ID 名称为 trapezium 的 div。

**CSS**

梯形可以通过设置相等的左右边框和平底来显示。

#trapezium {
        height: 0;
        width: 120px;
        border-bottom: 120px solid #ec3504;
        border-left: 60px solid transparent;
        border-right: 60px solid transparent;
    }

### **创建 CSS 平行四边形** ###

![97241813958ab3d52b10f2d370b160f7.png][]

**HTML**

使用 CSS 创建平行四边形需要一个 ID 为平行四边形的 div。

**CSS**

要创建平行四边形形状，请设置 skew 的变换值以将元素旋转 30 度角。

#parallelogram {
        width: 160px;
        height: 100px;
        background: #8734f7;
        -webkit-transform: skew(30deg);
        -moz-transform: skew(30deg);
        -o-transform: skew(30deg);
        transform: skew(30deg);
    }

### **创建一个 CSS 明星** ###

![1d93612b5410c287a8889eaadc118d18.png][]

**HTML**

为了使用 CSS 创建星形，需要一个 ID 为 star 的 div。

**CSS**

创建星形是使用变换的旋转值对边界进行的奇怪操作。请参阅下面的代码。

#star {
        width: 0;
        height: 0;
        margin: 50px 0;
        color: #fc2e5a;
        position: relative;
        display: block;
        border-right: 100px solid transparent;
        border-bottom: 70px solid #fc2e5a;
        border-left: 100px solid transparent;
        -moz-transform: rotate(35deg);
        -webkit-transform: rotate(35deg);
        -ms-transform: rotate(35deg);
        -o-transform: rotate(35deg);
    }
    
    #star:before {
        height: 0;
        width: 0;
        position: absolute;
        display: block;
        top: -45px;
        left: -65px;
        border-bottom: 80px solid #fc2e5a;
        border-left: 30px solid transparent;
        border-right: 30px solid transparent;
        content: '';
        -webkit-transform: rotate(-35deg);
        -moz-transform: rotate(-35deg);
        -ms-transform: rotate(-35deg);
        -o-transform: rotate(-35deg);
    }
    
    #star:after {
        content: '';
        width: 0;
        height: 0;
        position: absolute;
        display: block;
        top: 3px;
        left: -105px;
        color: #fc2e5a;
        border-right: 100px solid transparent;
        border-bottom: 70px solid #fc2e5a;
        border-left: 100px solid transparent;
        -webkit-transform: rotate(-70deg);
        -moz-transform: rotate(-70deg);
        -ms-transform: rotate(-70deg);
        -o-transform: rotate(-70deg);
    }

### **创建一个 CSS 六点星** ###

![3632bc8fd3b6efd44ca53cd9b4482355.png][]

**HTML**

使用 CSS 标记六角星形将需要一个 ID 名称为平行四边形的 div。

**CSS**

与具有五个点的常规星不同，六点星将使用边框属性进行操作。创建两组形状，然后将它们组合为一个。

#star_six_points {
        width: 0;
        height: 0;
        display: block;
        position: absolute;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-bottom: 100px solid #de34f7;
        margin: 10px auto;
    }
    
    #star_six_points:after {
        content: "";
        width: 0;
        height: 0;
        position: absolute;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-top: 100px solid #de34f7;
        margin: 30px 0 0 -50px;
    }

### **创建一个 CSS 五边形** ###

![fc929a2ab7c7c28f9232b7cbdc0cdd3c.png][]

**HTML**

要创建五边形，请设置一个 id 为 pentagon 的 div。

**CSS**

创建一个五边形需要两个元素来创建一个。首先创建一个梯形，然后在其上添加一个三角形。

#pentagon {
        width: 54px;
        position: relative;
        border-width: 50px 18px 0;
        border-style: solid;
        border-color: #277bab transparent;
    }
    
    #pentagon:before {
        content: "";
        height: 0;
        width: 0;
        position: absolute;
        top: -85px;
        left: -18px;
        border-width: 0 45px 35px;
        border-style: solid;
        border-color: transparent transparent #277bab;
    }

### **创建一个 CSS 六边形** ###

![52770ff0e65656a3b9aec2c4fa9a31b0.png][]

**HTML**

为了创建一个六边形，设置一个 ID 为 hexagon 的 div。

CSS  
有不同的方法来创建一个六边形。创建它的一种方法几乎与创建五边形相同。首先创建一个矩形，然后在顶部添加两个三角形。

#hexagon {
        width: 100px;
        height: 55px;
        background: #fc5e5e;
        position: relative;
        margin: 10px auto;
    }
    
    #hexagon:before {
        content: "";
        width: 0;
        height: 0;
        position: absolute;
        top: -25px;
        left: 0;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-bottom: 25px solid #fc5e5e;
    }
    
    #hexagon:after {
        content: "";
        width: 0;
        height: 0;
        position: absolute;
        bottom: -25px;
        left: 0;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-top: 25px solid #fc5e5e;
    }

### **创建一个 CSS 八边形** ###

![45581bc2bf8a3ef9c9a7947cbef4108b.png][]

**HTML**

创建一个八边形需要一个 ID 为八边形的 div。

**CSS**

八角形也可以是黑客。首先创建两个相同的梯形，然后从每一侧放置两个三角形。尽管还有其他一些方法可以做到这一点，但这是完成任务的最佳方法。

#octagon {
        width: 100px;
        height: 100px;
        background: #ac60ec;
        position: relative;
    }
    
    #octagon:before {
        content: "";
        width: 42px;
        height: 0;
        position: absolute;
        top: 0;
        left: 0;
        border-bottom: 29px solid #ac60ec;
        border-left: 29px solid #f4f4f4;
        border-right: 29px solid #f4f4f4;
    }
    
    #octagon:after {
        content: "";
        width: 42px;
        height: 0;
        position: absolute;
        bottom: 0;
        left: 0;
        border-top: 29px solid #ac60ec;
        border-left: 29px solid #f4f4f4;
        border-right: 29px solid #f4f4f4;
    }    
    
    }

### **创建一个 CSS 心脏** ###

![fc54a45d5f7e66f859fd20eb1e9f9483.png][]

**HTML**

要创建一个心形的 CSS，让我们首先创建一个 ID 名称为 heart 的 div。

**CSS**

心形可能很难做到，但可以通过从不同角度旋转元素并更改 transform-origin 属性以更改转换后元素的位置来完成。

#heart {
        position: relative;
    }
    
    #heart:before,#heart:after {
        content: "";
        width: 70px;
        height: 115px;
        position: absolute;
        background: red;
        left: 70px;
        top: 0;
        -webkit-border-radius: 50px 50px 0 0;
        -moz-border-radius: 50px 50px 0 0;
        border-radius: 50px 50px 0 0;
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg);
        -webkit-transform-origin: 0 100%;
        -moz-transform-origin: 0 100%;
        -ms-transform-origin: 0 100%;
        -o-transform-origin: 0 100%;
        transform-origin: 0 100%;
    }
    
    #heart:after {
        left: 0;
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg);
        -webkit-transform-origin: 100% 100%;
        -moz-transform-origin: 100% 100%;
        -ms-transform-origin: 100% 100%;
        -o-transform-origin: 100% 100%;
        transform-origin: 100% 100%;
    }

### **创建一个 CSS 鸡蛋** ###

![9f4f82c0905073f12a518275fd8e2baa.png][]

**HTML**

为了创建一个蛋形 CSS，首先创建一个 ID 名为 egg 的 div。

**CSS**

蛋形几乎与椭圆形相同，只是高度略高于宽度，并且半径经过精心操作以获得良好的效果。

#egg {
        width: 136px;
        height: 190px;
        background: #ffc000;
        display: block;
        -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
        border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    }

### **创建一个 CSS 无穷大符号** ###

![4d5cdbc3b0423591e7609364b7681594.png][]

**HTML**

要在 CSS 中创建一个无限大的形状，请创建一个 ID 名称为 infinity 的 div。

**CSS**

可以通过仔细操纵边界和设置圆形形状的角度来实现无限大的形状。

#infinity {
        width: 220px;
        height: 100px;
        position: relative;
    }
    
    #infinity:before,#infinity:after {
        content: "";
        width: 60px;
        height: 60px;
        position: absolute;
        top: 0;
        left: 0;
        border: 20px solid #06c999;
        -moz-border-radius: 50px 50px 0;
        border-radius: 50px 50px 0 50px;
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }
    
    #infinity:after {
        left: auto;
        right: 0;
        -moz-border-radius: 50px 50px 50px 0;
        border-radius: 50px 50px 50px 0;
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg);
    }

### **创建 CSS 评论气泡** ###

![4a1ec9bfa538039ae013e4ccee8c08d5.png][]

**HTML**

为了在 CSS 中创建评论气泡形状，请创建一个 ID 名称为 comment\_bubble 的 div。

**CSS**

可以通过制作一个矩形并给它一个边框半径来创建气泡注释形状，然后在左侧放置一个三角形。

#comment_bubble {
        width: 140px;
        height: 100px;
        background: #088cb7;
        position: relative;
        -moz-border-radius: 12px;
        -webkit-border-radius: 12px;
        border-radius: 12px;
    }
    
    #comment_bubble:before {
        content: "";
        width: 0;
        height: 0;
        right: 100%;
        top: 38px;
        position: absolute;
        border-top: 13px solid transparent;
        border-right: 26px solid #088cb7;
        border-bottom: 13px solid transparent;
    }

### **创建一个 CSS Pacman** ###

![fae94c5d383cf313c3fa0c61edf4f12b.png][]

**HTML**

要在 CSS 中创建 pacman 形状，请创建一个 ID 名称为 pacman 的 div。

**CSS**

创建 pacman 也是一种 hack。只需操纵边框和半径即可在圆的左侧创建一个开口。

#pacman {
        width: 0;
        height: 0;
        border-right: 70px solid transparent;
        border-top: 70px solid #ffde00;
        border-left: 70px solid #ffde00;
        border-bottom: 70px solid #ffde00;
        border-top-left-radius: 70px;
        border-top-right-radius: 70px;
        border-bottom-left-radius: 70px;
        border-bottom-right-radius: 70px;
    }

### **最后的话** ###

使用 CSS 形状在您的网站上放置图像有很多优点。您现在可以将形状用作渐进式工作流程的一部分，尽管它们在不支持的浏览器中具有可接受的后备选项，尤其是在侏罗纪 IE 浏览器中。

[SVG]: https://1stwebdesigner.com/create-simple-shapes-svg/
[2f2092229465d3e0594aab66fa6a6985.png]: https://img-blog.csdnimg.cn/img_convert/2f2092229465d3e0594aab66fa6a6985.png
[5af20849a81c8689813c6ffd5db7d677.png]: https://img-blog.csdnimg.cn/img_convert/5af20849a81c8689813c6ffd5db7d677.png
[630a3a105a6aa2e70e2ab1e69d110228.png]: https://img-blog.csdnimg.cn/img_convert/630a3a105a6aa2e70e2ab1e69d110228.png
[86b24ff924725d5a590c8ccaf254b985.png]: https://img-blog.csdnimg.cn/img_convert/86b24ff924725d5a590c8ccaf254b985.png
[e79dc17b706968cf4320f0e410ffa15f.png]: https://img-blog.csdnimg.cn/img_convert/e79dc17b706968cf4320f0e410ffa15f.png
[ac3a07b4a3b5892175c7219d8f83bf9d.png]: https://img-blog.csdnimg.cn/img_convert/ac3a07b4a3b5892175c7219d8f83bf9d.png
[cc82b843d6b9536410d2a600b3d1bd9c.png]: https://img-blog.csdnimg.cn/img_convert/cc82b843d6b9536410d2a600b3d1bd9c.png
[c27497cfbc583ec6d0cbe26b387a517a.png]: https://img-blog.csdnimg.cn/img_convert/c27497cfbc583ec6d0cbe26b387a517a.png
[94b7eda0d45f31ef840b102b028face9.png]: https://img-blog.csdnimg.cn/img_convert/94b7eda0d45f31ef840b102b028face9.png
[0ac2a5fdbb8dbacdaf9e6479ed4e8cb7.png]: https://img-blog.csdnimg.cn/img_convert/0ac2a5fdbb8dbacdaf9e6479ed4e8cb7.png
[97241813958ab3d52b10f2d370b160f7.png]: https://img-blog.csdnimg.cn/img_convert/97241813958ab3d52b10f2d370b160f7.png
[1d93612b5410c287a8889eaadc118d18.png]: https://img-blog.csdnimg.cn/img_convert/1d93612b5410c287a8889eaadc118d18.png
[3632bc8fd3b6efd44ca53cd9b4482355.png]: https://img-blog.csdnimg.cn/img_convert/3632bc8fd3b6efd44ca53cd9b4482355.png
[fc929a2ab7c7c28f9232b7cbdc0cdd3c.png]: https://img-blog.csdnimg.cn/img_convert/fc929a2ab7c7c28f9232b7cbdc0cdd3c.png
[52770ff0e65656a3b9aec2c4fa9a31b0.png]: https://img-blog.csdnimg.cn/img_convert/52770ff0e65656a3b9aec2c4fa9a31b0.png
[45581bc2bf8a3ef9c9a7947cbef4108b.png]: https://img-blog.csdnimg.cn/img_convert/45581bc2bf8a3ef9c9a7947cbef4108b.png
[fc54a45d5f7e66f859fd20eb1e9f9483.png]: https://img-blog.csdnimg.cn/img_convert/fc54a45d5f7e66f859fd20eb1e9f9483.png
[9f4f82c0905073f12a518275fd8e2baa.png]: https://img-blog.csdnimg.cn/img_convert/9f4f82c0905073f12a518275fd8e2baa.png
[4d5cdbc3b0423591e7609364b7681594.png]: https://img-blog.csdnimg.cn/img_convert/4d5cdbc3b0423591e7609364b7681594.png
[4a1ec9bfa538039ae013e4ccee8c08d5.png]: https://img-blog.csdnimg.cn/img_convert/4a1ec9bfa538039ae013e4ccee8c08d5.png
[fae94c5d383cf313c3fa0c61edf4f12b.png]: https://img-blog.csdnimg.cn/img_convert/fae94c5d383cf313c3fa0c61edf4f12b.png