E生相爱工作室

18778998308服务热线

好管家网络

纯CSS绘制形状(三角形、菱形、球体,长方体等等

作者: 发表时间:2020-05-11 12:47:01浏览量:1639

在前段时间看到有的面试题说让说一下梯形,当时自己懵了,所以把各种各样的常见的形状的CSS实现总结一下,基本形状实现之后就可以利用这些基本形状进行组合,就可以实现复杂的形状:1、三角形 .triangle{ width:

在前段时间看到有的面试题说让说一下梯形,当时自己懵了,所以把各种各样的常见的形状的CSS实现总结一下,基本形状实现之后就可以利用这些基本形状进行组合,就可以实现复杂的形状:

1、三角形

        .triangle{           

         width: 0;            

         height: 0;           

          border: 50px solid blue;      

          //可以通过改变边框的颜色来控制三角形的方向

          border-color: blue transparent transparent transparent;       

           }

1

2

3

4

5

6

7



2、梯形

.trapzoid{            

width: 40px;            

height: 100px;            

border: 50px solid blue;            

border-color: transparent transparent blue transparent;         

}

1

2

3

4

5

6

实现的效果如图:




4、圆形

.circle{            

width: 100px;            

height: 100px;            

border-radius: 50%;           

background: blue;        

 }

1

2

3

4

5

6

实现的效果:




4、球体

        .sphere{            

        width: 100px;            

        height: 100px;            

        border-radius: 50%;            

        background: radial-gradient(circle at 70px 70px,#5cabff,#000000);     

}

1

2

3

4

5

6

实现的效果如下:




5、椭圆

        .ellipse{            

        width: 200px;            

        height: 100px;            

        border-radius: 50%;            

        background: blue;        

}

1

2

3

4

5

6

实现的效果:



6、半圆

        .semicircle{            

        width: 50px;            

        height: 100px;           

        border-radius: 50px 0 0 50px ;            

        background: blue;        

        }

1

2

3

4

5

6

效果如下:


7、菱形


 .rhombus{

            width: 100px;

            height: 100px;

            transform: rotateZ(45deg)skew(30deg,30deg);

            background: blue;

        }

1

2

3

4

5

6

7

效果如下:



8、心

心是由两个圆形与一个矩形进行组合的


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

}


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

效果:



9、五边形

五边形是由三角形和梯形组成的

        .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;            b

        order-color: transparent transparent blue;        

        }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

效果:



10、圆柱体

由一个椭圆和一个圆角矩形进行组合

        .cylinder {            

        position: relative;            t

        ransform: 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;        

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

效果:



11、长方体

由六个矩形实现


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

}

<div class="cuboid">

    <!--前面 -->

    <div class="front"></div>

    <!--后面 -->

    <div class="back"></div>

    <!--左面 -->

    <div class="left"></div>

    <!--右面 -->

    <div class="right"></div>

    <!--上面 -->

    <div class="top"></div>

    <!--下面 -->

    <div class="bottom"></div>

</div>


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

效果:




12、棱锥

四个三角形和一个矩形组成




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

}

<div class="pyramid">

    <!--前面 -->

    <div class="front"></div>

    <!--后面 -->

    <div class="back"></div>

    <!--左面 -->

    <div class="left"></div>

    <!--右面 -->

    <div class="right"></div>


    <!--下面 -->

    <div class="bottom"></div>

</div>


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

效果:



————————————————

版权声明:本文为CSDN博主「洳娅」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。

原文链接:https://blog.csdn.net/qq_39897978/java/article/details/90172695




TAG:网站建设,网站推广,微信公众号开发、小程序开发、网站活动策划,H5制作,代运营,网站代运营,微信代运营,公众号代运营,网站定制,代维护
2020-05-11 12:47:01 1639浏览

联系我们

好管家网络工作室
电话:18778998308
邮箱:info@esxa.cn
地址:好管家网络工作室