V2AS问路
CSS 各种形状
阅读原文时间：2023年07月11日阅读：2

制作圆形：

要使用CSS来制作一个圆形，我们需要一个div，被给它设置一个ID

圆形在设置CSS时要设置宽度和高度相等，然后设置border-radius属性为宽度或高度的一半即可：

#circle {

width: 120px;

height: 120px;

background: #7fee1d;

-moz-border-radius: 60px;

-webkit-border-radius: 60px;

border-radius: 60px;

}

制作椭圆形：

椭圆形是正圆形的一个变体，同样使用一个带ID的div来制作

设置椭圆形的CSS时，高度要设置为宽度的一半，border-radius属性也要做相应的改变：

#oval {

width: 200px;

height: 100px;

background: #e9337c;

-webkit-border-radius: 100px / 50px;

-moz-border-radius: 100px / 50px;

border-radius: 100px / 50px;

}

制作三角形：

要创建一个CSS三角形，需要使用border，通过设置不同边的透明效果，我们可以制作出三角形的现状。另外，在制作三角形时，宽度和高度要设置为0。

#triangle {

width: 0;

height: 0;

border-bottom: 140px solid #fcf921;

border-left: 70px solid transparent;

border-right: 70px solid transparent;

}

制作倒三角形：

与正三角形不同的是，倒三角形要设置的是border-top、border-left和border-right三条边的属性：

#triangle {

width: 0;

height: 0;

border-top: 140px solid #20a3bf;

border-left: 70px solid transparent;

border-right: 70px solid transparent;

}

  1. 制作左三角形：

  2. 左三角形操作的是border-top、border-left和border-right三条边的属性，其中上边和下边要设置透明属性。

  3. #triangle_left {

  4. width: 0;

  5. height: 0;

  6. border-top: 70px solid transparent;

  7. border-right: 140px solid #6bbf20;

  8. border-bottom: 70px solid transparent;

  9. }

  10. 6

    制作菱形

    制作菱形的方法有很多种。这里使用的是transform属性和rotate相结合，使两个正反三角形上下显示。

    #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;

    }

    步骤阅读

  11. 7

    制作梯形：

    梯形是三角形的一个变体，设置CSS梯形时，左右两条边设置为相等，并且给它设置一个宽度。

    #trapezium {

    height: 0;

    width: 120px;

    border-bottom: 120px solid #ec3504;

    border-left: 60px solid transparent;

    border-right: 60px solid transparent;

    }

  12. 8

    制作平行四边形：

    平行四边形的制作方式是使用transform属性使长方形倾斜一个角度。

    #parallelogram {

    width: 160px;

    height: 100px;

    background: #8734f7;

    -webkit-transform: skew(30deg);

    -moz-transform: skew(30deg);

    -o-transform: skew(30deg);

    transform: skew(30deg);

    }

    步骤阅读

  13. 9

    星形：

    星形的HTML结构同样使用一个带ID的空div。星形的实现方式比较复杂，主要是使用transform属性来旋转不同的边。仔细体会下面的代码。

    #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);

    }

  14. 10

    六角星形：

    和五角星的制作方法不同，六角星形状的制作方法是操纵border属性来制作两半图形，然后合并它们。

    #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;

    }

    步骤阅读

  15. 11

    六边形：

    六边形的制作方法可以有很多种，可以像五边形一样，先制作一个长方形，然后在它的上面和下面各放置一个三角形。

    #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;

    }

    步骤阅读

  16. 12

    心形：

    心形的制作是非常复杂的，可以使用伪元素来制作，分别将伪元素旋转不同的角度，并修改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%;

    }

    步骤阅读

  17. 13

    蛋形：

    蛋形时椭圆形的一个变体，它的高度要比宽度稍大，并且设置正确的border-radius属性即可以制作出一个蛋形。

    #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%;

    }

    步骤阅读

  18. 14

    无穷符号：

    无穷符号可以通过border属性和设置伪元素的角度来实现。

    #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);

    }

    步骤阅读

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

****************************************************************************************************

border-bottom:24px solid #F00;
border-right:24px solid transparent;
border-top:24px solid #F00;
border-left:24px solid transparent;

以前以为border是个中规中矩的长方形，我们可以看出来其实border的图片并不是中规中矩的长方形.而是梯形的结构

利用这一原理就可以制作出斜方向的不规则图片如

代码如下:
border-bottom:24px solid #F00;
border-right:24px solid transparent;（宽度存在但是为透明）

理解css结构，border设置宽度就意味着自身的高度要设置为0，才能保证他在同一行中。

如图未设置高度为0时

设置height:0时

大家也可以自己尝试一下，

借此也可以更好的理解css3.0中的伪类after，before来构造不规则的图片！避免使用了较大的图片。

*****************************************************************************************************








手机扫一扫

移动阅读更方便

阿里云服务器
腾讯云服务器
七牛云服务器

你可能感兴趣的文章

vue上通过krpano.js实现360全景图
vue3 + mark.js | 实现文字标注功能
tailwindcss -原子化 CSS 框架

4

Vue【原创】整合el-dialog，可拖动可全屏最大化弹出框

5

前端八股文everybody准备好了没

6

详细讲解原生js拖拽

7

基于uni-app+vue3渲染markdown格式|uniapp软键盘顶起问题解决方案

8

HTML5CSS3基础

9

CSS ? Layout Module : CSS 布局模型

10

css 03-CSS样式表和选择器