利用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>

相关阅读:
hdu4998 旋转坐标系
hdu4998 旋转坐标系
hdu5012 水搜索
hdu5012 水搜索
hdu5007 小水题
ZOJ 3645 BiliBili 高斯消元难度:1
ZOJ 3654 Letty's Math Class 模拟难度:0
ZOJ 3647 Gao the Grid dp,思路,格中取同一行的三点,经典难度:3
ZOJ 3646 Matrix Transformer 二分匹配,思路,经典难度:2
ZOJ 3644 Kitty's Game dfs,记忆化搜索,map映射难度:2

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