css3写五星红旗

最新推荐文章于 2024-02-27 11:40:11 发布

Yuban_Pian

最新推荐文章于 2024-02-27 11:40:11 发布

阅读量721

点赞数 2

分类专栏： css3 文章标签： css html css3

本文链接：https://blog.youkuaiyun.com/Yuban_Pian/article/details/119488410

版权

css3 专栏收录该内容

2 篇文章

订阅专栏

文章借鉴于：html五星红旗写法,html+css生成五星红旗.

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>🚩</title>
    <style type="text/css">
            .qi {
            width: 864px;
            height: 576px;
            background-color: red;
        }
        
        .tri {
            width: 0;
            height: 0;
            top: 90px;
            left: 45px;
            border-left: 100px solid transparent;
            border-right: 100px solid transparent;
            border-bottom: 70px solid yellow;
            position: absolute;
            margin: auto;
            display: block;
            transform: rotate(35deg);
        }
        
        .tri::before {
            content: "";
            height: 0px;
            width: 0px;
            position: absolute;
            display: block;
            top: -45px;
            left: -65px;
            border-right: 30px solid transparent;
            border-bottom: 80px solid yellow;
            border-left: 30px solid transparent;
            transform: rotate(-35deg);
        }
        
        .tri::after {
            content: "";
            width: 0;
            height: 0;
            position: absolute;
            display: block;
            top: 3px;
            left: -105px;
            border-right: 100px solid transparent;
            border-bottom: 70px solid yellow;
            border-left: 100px solid transparent;
            transform: rotate(-70deg);
        }
        
        #one {
            top: 30px;
            left: 280px;
        }
        
        #two {
            top: 80px;
            left: 340px;
        }
        
        #three {
            top: 150px;
            left: 340px;
        }
        
        #four {
            top: 210px;
            left: 280px;
        }
        
        .min {
            width: 0;
            height: 0;
            border-left: 20px solid transparent;
            border-right: 20px solid transparent;
            border-bottom: 14px solid yellow;
            position: absolute;
            margin: auto;
            display: block;
            transform: rotate(35deg);
        }
        
        .min::before {
            content: "";
            height: 0px;
            width: 0px;
            position: absolute;
            display: block;
            top: -10px;
            left: -12px;
            border-right: 6px solid transparent;
            border-bottom: 16px solid yellow;
            border-left: 6px solid transparent;
            transform: rotate(-35deg);
        }
        
        .min::after {
            content: "";
            width: 0;
            height: 0;
            position: absolute;
            display: block;
            top: 0px;
            left: -20px;
            border-right: 20px solid transparent;
            border-bottom: 14px solid yellow;
            border-left: 20px solid transparent;
            transform: rotate(-70deg);
            min
    </style>
</head>

<body>
    <div class="qi"></div>
    <div class="tri"></div>
    <div id="one" class="min"></div>
    <div id="two" class="min"></div>
    <div id="three" class="min"></div>
    <div id="four" class="min"></div>
</body>

</html>