纯CSS制作图形效果

2021-07-07 17:14:00

下面所有的例子都是在demo.html的基础上添加相关样式实现的。

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<style type="text/css">

        .demo{

            margin:100px auto;

        }

</style>

</head>

<body>

    <div class="demo">

    </div>

</body>

</html>

正方形

.demo{width:100px;height:100px;background:red;}

长方形

.demo{width:100px;height:150px;background:red;}

圆形

.demo{width:100px;height:100px;background:red;border-radius:50%;}

半圆

.demo{width:100px;height:50px;background:red;border-radius:100px 100px 0 0 ;}

扇形

.demo{background:none repeat scroll 0 0 red;border-radius:50px 0 0 0;height:50px;width:50px;}

椭圆

.demo{width:200px;height:100px;border-radius:100px / 50px;background:red;}

三角朝上

.demo{width:0;height:0;border:50px solid red;border-color:transparent transparent red;}

纯CSS制作图形效果

三角朝下

.demo{width:0;height:0;border:50px solid red;border-color:red transparent transparent;}

三角朝左

.demo{width:0;height:0;border:50px solid red;border-color: transparent red transparent transparent;}

三角朝右

.demo{width:0;height:0;border:50px solid red;border-color: transparent  transparent transparent red;}

左上三角形

.demo{width:0px;height:0px;border:100px solid red;border-color:red transparent transparent red;}

平行四边形

.demo{width:150px;height:100px;transform:skew(20deg);background:red;}

梯形

.demo{height:0;width:100px;border-bottom:100px solid #e5c3b2;border-left:60px solid transparent;border-right:60px solid transparent;}

梯形

.demo{height:100px;width:0;border-right:100px solid #e5c3b2;border-top:60px solid transparent;border-bottom:60px solid transparent;}

图表

.demo{height:0px;width:0px;border:50px solid red;border-radius:50px;border-color:purple red yellow orange;}

六角星

.demo{

    width:0;

    height:0;

    border-left:50px solid transparent;

    border-right:50px solid transparent;

    border-bottom:100px solid red;

    position:relative;

}

.demo:after{

    width:0;

    height:0;

    border-left:50px solid transparent;

    border-right:50px solid transparent;

    border-top:100px solid red;

    position:absolute;

    content:"";

    top:30px;

    left:-50px;

}

五角星

.demo{

   margin: 50px 0;

   position: relative;

   display: block;

   color: red;

   width: 0px;

   height: 0px;

   border-right: 100px solid transparent;

   border-bottom: 70px solid red;

   border-left: 100px solid transparent;

   -moz-transform: rotate(35deg);

   -webkit-transform: rotate(35deg);

   -ms-transform: rotate(35deg);

   -o-transform: rotate(35deg);

   transform: rotate(35deg);

}

        .demo:before{

            border-bottom: 80px solid red;

            border-left: 30px solid transparent;

            border-right: 30px solid transparent;

            position: absolute;

            height: 0;

            width: 0;

            top: -45px;

            left: -65px;

            display: block;

            content: '';

            -webkit-transform: rotate(-35deg);

            -moz-transform: rotate(-35deg);

            -ms-transform: rotate(-35deg);

            -o-transform: rotate(-35deg);

            transform: rotate(-35deg);

        }

        .demo:after{

            position: absolute;

                display: block;

                color: red;

                top: 3px;

                left: -105px;

                width: 0px;

                height: 0px;

                border-right: 100px solid transparent;

                border-bottom: 70px solid red;

                border-left: 100px solid transparent;

                -webkit-transform: rotate(-70deg);

                -moz-transform: rotate(-70deg);

                -ms-transform: rotate(-70deg);

                -o-transform: rotate(-70deg);

                transform: rotate(-70deg);

                content: '';

        }

彩带

.demo{

            width:0;

            height:100px;

            border-left:50px solid red;

            border-right:50px solid red;

            border-bottom:35px solid transparent;

        }

纯CSS制作图形效果

心形

.demo{

            position: relative;

            width: 100px;

            height: 90px;

        }

        .demo:before,.demo:after{

            position: absolute;

            content: "";

            left: 50px;

            top: 0;

            width: 50px;

            height: 80px;

            background: red;

            -moz-border-radius: 50px 50px 0 0;

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

        }

        .demo: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制作图形效果

pac-man

.demo{

            width: 0px;

            height: 0px;

            border: 60px solid red;

            border-color: red transparent red red ;

            -moz-border-radius: 60px;

            -webkit-border-radius: 60px;

            border-radius: 60px;

        }

纯CSS制作图形效果

对话泡泡

.demo{

            width:120px;

            height:80px;

            background:red;

            position:relative;

            border-radius:10px;

        }

        .demo:before{

            content:'';

            position:absolute;

            right:100%;

            top:26px;

            width:0;

            height:0;

            border-top:13px solid transparent;

            border-right:26px solid red;

            border-bottom:13px solid transparent;

        }

Point Burst

.demo{

            background: red;

            width: 80px;

            height: 80px;

            position: relative;

            text-align: center;

        }

        .demo:before,.demo:after{

            content: "";

            position: absolute;

            top: 0; left: 0;

            height: 80px;

            width: 80px;

            background: red;

        }

        .demo:before{

            -webkit-transform: rotate(30deg);

                -moz-transform: rotate(30deg);

                -ms-transform: rotate(30deg);

                -o-transform: rotate(30deg);

                transform: rotate(30deg);

        }

        .demo:after{

            -webkit-transform: rotate(60deg);

            -moz-transform: rotate(60deg);

            -ms-transform: rotate(60deg);

            -o-transform: rotate(60deg);

            transform: rotate(60deg);

        }

阴阳图

.demo{

            width: 96px;

            height: 48px;

            background: #eee;

            border-color: red;

            border-style: solid;

            border-width: 2px 2px 50px 2px;

            border-radius: 100%;

            position: relative;

        }

        .demo:before{

            content: "";

            position:

            absolute;

            top: 50%;

            left: 0;

            background: #eee;

            border: 18px solid red;

            border-radius: 100%;

            width: 12px;

            height: 12px;

        }

        .demo:after{

            content: "";

            position: absolute;

            top: 50%;

            left: 50%;

            background: red;

            border: 18px solid #eee;

            border-radius:100%;

            width: 12px;

            height: 12px;

        }

学习网站：https://cssicon.space/#/

码农公寓

正方形

长方形

相关文章