利用css3转换transform画五星红旗

效果：

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }

        section {
             300px;
            height: 200px;
            background-color: red;
            margin: 50px auto;
        }

        .contain {
             30px;
            height: 30px;
            position: relative;
        }

        .star {
             0;
            height: 0;
            border-left: 15px solid transparent;
            border-right: 15px solid transparent;
            border-bottom: 10px solid yellow;
            position: relative;
            transform: rotate(35deg);
        }

        .star::before {
            content: "";
            display: block;
             0;
            height: 0;
            border-left: 15px solid transparent;
            border-right: 15px solid transparent;
            border-bottom: 10px solid yellow;
            position: absolute;
            transform: rotate(70deg);
            left: -15px;
        }

        .star::after {
            content: "";
            display: block;
             0;
            height: 0;
            border-left: 15px solid transparent;
            border-right: 15px solid transparent;
            border-bottom: 10px solid yellow;
            position: absolute;
            transform: rotate(145deg);
            left: -15px;
        }

        .contain .small {
            transform: scale(0.6);
        }

        .contain .big {
            top: 18px;
            left: 30px;
            transform: rotate(-35deg) scale(2);

        }

        .contain .small1 {
            left: 76px;
            top: 14px;
        }

        .contain .small2 {
            left: 90px;
            top: -24px;
        }

        .contain .small3 {
            left: 90px;
            top: -30px;
        }

        .contain .small4 {
            left: 78px;
            top: -37px;
        }
    </style>
</head>

<body>
    <section>
        <div class="contain">
            <div class="star small small1"></div>
        </div>
        <div class="contain">
            <div class="star big"></div>
        </div>
        <div class="contain">
            <div class="star small small2"></div>
        </div>
        <div class="contain">
            <div class="star small small3"></div>
        </div>
        <div class="contain">
            <div class="star small small4"></div>
        </div>
    </section>
</body>

</html>

相关阅读:
asp.net利用多线程执行长时间的任务，在客户端显示进度条
电脑不能正常关机的原因和解决方法
任务栏有两个相同的图标
输入法不在桌面显示如何解决解决
ASP操作XML文件的主要方法和实现
Java开发工具下载
感人至深的文章
Java开发工具下载地址
网页上图片用ps写上字之后边上锯齿严重
队列中取最大值操作问题

原文地址：https://www.cnblogs.com/wuqilang/p/12172263.html