纯CSS制作图形效果

下面所有的例子都是在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{100px;height:100px;background:red;}

长方形

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

圆形

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

半圆

.demo{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;50px;}

椭圆

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

三角朝上

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

三角朝下

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

三角朝左

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

三角朝右

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

左上三角形

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

平行四边形

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

梯形

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

梯形

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

图表

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

六角星

.demo{
    0;
    height:0;
    border-left:50px solid transparent;
    border-right:50px solid transparent;
    border-bottom:100px solid red;
    position:relative;
}
.demo:after{
    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; 
    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; 
             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; 
                 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{
            0;
            height:100px;
            border-left:50px solid red;
            border-right:50px solid red;
            border-bottom:35px solid transparent;
        }

心形

.demo{
            position: relative; 
             100px; 
            height: 90px; 
        }
        .demo:before,.demo:after{
            position: absolute; 
            content: ""; 
            left: 50px; 
            top: 0; 
             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%; 
        }

pac-man

.demo{
             0px; 
            height: 0px;
            border: 60px solid red;
            border-color: red transparent red red ;
            -moz-border-radius: 60px;
            -webkit-border-radius: 60px;
            border-radius: 60px; 
        }

对话泡泡

.demo{
            120px;
            height:80px;
            background:red;
            position:relative;
            border-radius:10px;
        }
        .demo:before{
            content:'';
            position:absolute;
            right:100%;
            top:26px;
            0;
            height:0;
            border-top:13px solid transparent;
            border-right:26px solid red;
            border-bottom:13px solid transparent;
        }

Point Burst

.demo{
            background: red;
             80px; 
            height: 80px; 
            position: relative; 
            text-align: center; 
        }
        .demo:before,.demo:after{
            content: ""; 
            position: absolute; 
            top: 0; left: 0; 
            height: 80px; 
             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{
             96px;
            height: 48px; 
            background: #eee; 
            border-color: red; 
            border-style: solid; 
            border- 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%; 
             12px; 
            height: 12px; 
        }
        .demo:after{
            content: ""; 
            position: absolute; 
            top: 50%; 
            left: 50%; 
            background: red; 
            border: 18px solid #eee; 
            border-radius:100%; 
             12px; 
            height: 12px; 
        }

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

http://tridiv.com/

相关阅读:
QML中 Webview 元素的runJavaScript() 函数的使用方法
 Thinkphp 第二篇：如何将一个外部项目导入到Thimkphp环境中
 AMD电脑装完Winsows10后开机蓝屏，报错代码：cdmsnroot_s.sys
JVM02——JVM运行时内存
 JVM01——JVM内存区域的构成
 JVM04——七个GC垃圾收集器
 JVM03——四种垃圾回收算法
 Mybatis的缓存机制详解
 mybatis插入insert操作,返回自增id
mybatis批量查询-插入-删除
原文地址：https://www.cnblogs.com/yuyujuan/p/10451933.html