利用css transform转换绘制五角星绘制五星红旗

效果截图

源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>五星红旗</title>
    <style>
        .div-wrap {
            background-color: red;
            width: 600px;
            height: 216px;
            padding: 90px 30px 0 ;
        }
        .div {
           
            position: relative;
            width: 0;
            height: 0;
            border-right: 100px solid transparent;
            border-bottom: 70px solid yellow;
            border-left: 100px solid transparent;
            transform: rotate(35deg);
            
        }
        .div::before {
            content: "";
            display: block;
            position: absolute;
            top: -45px;
            left: -65px;
            width: 0;
            height: 0;
            border-right: 30px solid transparent;
            border-bottom: 80px solid yellow;
            border-left: 30px solid transparent;
            transform: rotate(-35deg);
            transform: 
        }
        .div::after {
            content: '';
            position: absolute;
            display: block;
            color: red;
             top: 3px;
            left: -105px;
            width: 0px;
            height: 0px;
            border-right: 100px solid transparent;
            border-bottom: 70px solid yellow;
            border-left: 100px solid transparent;
            transform: rotate(-70deg);
        }
        .div-a {
            position: relative;
            width: 0;
            height: 0;
            border-left: 27px solid transparent;
            border-right: 27px solid transparent;
            border-bottom: 27px solid yellow;
            transform: rotate(62deg);
        }
        .div-a::before {
            content: "";
            display: block;
            position: absolute;
            top: 2px;
            left: -32px;
            width: 0;
            height: 0;
            border-left: 27px solid transparent;
            border-right: 27px solid transparent;
            border-bottom: 27px solid yellow;
            transform: rotate(-70deg);
        }
        .div-a::after {
            content: "";
            display: block;
            position: absolute;
             top: -14px;
            left: -28px;
            width: 0;
            height: 0;
            border-left: 14px solid transparent;
            border-right: 14px solid transparent;
            border-bottom: 27px solid yellow;
            transform: rotate(-35deg);
        }
        .div-translate-a {
            transform: translate(232px,-118px);
        }
        .div-b {
            position: relative;
            width: 0;
            height: 0;
            border-left: 27px solid transparent;
            border-right: 27px solid transparent;
            border-bottom: 27px solid yellow;
            transform: rotate(62deg);
        }
        .div-b::before {
            content: "";
            display: block;
            position: absolute;
            top: 2px;
            left: -32px;
            width: 0;
            height: 0;
            border-left: 27px solid transparent;
            border-right: 27px solid transparent;
            border-bottom: 27px solid yellow;
            transform: rotate(-70deg);
        }
        .div-b::after {
            content: "";
            display: block;
            position: absolute;
             top: -14px;
            left: -28px;
            width: 0;
            height: 0;
            border-left: 14px solid transparent;
            border-right: 14px solid transparent;
            border-bottom: 27px solid yellow;
            transform: rotate(-35deg);
        }
        .div-translate-b {
            transform: translate(258px,-84px);
        }
        .div-c {
            position: relative;
            width: 0;
            height: 0;
            border-left: 27px solid transparent;
            border-right: 27px solid transparent;
            border-bottom: 27px solid yellow;
            transform: rotate(62deg);
        }
        .div-c::before {
            content: "";
            display: block;
            position: absolute;
            top: 2px;
            left: -32px;
            width: 0;
            height: 0;
            border-left: 27px solid transparent;
            border-right: 27px solid transparent;
            border-bottom: 27px solid yellow;
            transform: rotate(-70deg);
        }
        .div-c::after {
            content: "";
            display: block;
            position: absolute;
             top: -14px;
            left: -28px;
            width: 0;
            height: 0;
            border-left: 14px solid transparent;
            border-right: 14px solid transparent;
            border-bottom: 27px solid yellow;
            transform: rotate(-35deg);
        }
        .div-translate-c {
            transform: translate(257px,-42px);
        }
        .div-d {
            position: relative;
            width: 0;
            height: 0;
            border-left: 27px solid transparent;
            border-right: 27px solid transparent;
            border-bottom: 27px solid yellow;
            transform: rotate(62deg);
        }
        .div-d::before {
            content: "";
            display: block;
            position: absolute;
            top: 2px;
            left: -32px;
            width: 0;
            height: 0;
            border-left: 27px solid transparent;
            border-right: 27px solid transparent;
            border-bottom: 27px solid yellow;
            transform: rotate(-70deg);
        }
        .div-d::after {
            content: "";
            display: block;
            position: absolute;
             top: -14px;
            left: -28px;
            width: 0;
            height: 0;
            border-left: 14px solid transparent;
            border-right: 14px solid transparent;
            border-bottom: 27px solid yellow;
            transform: rotate(-35deg);
        }
        .div-translate-d {
            transform: translate(212px,-16px);
        }
    </style>
</head>
<body>
    <div class="div-wrap">
        <div class="div"></div>
        <div class="div-translate-a">
            <div class="div-a"></div>
            
        </div>
        <div class="div-translate-b">
            <div class="div-b"></div>
            
        </div>
        <div class="div-translate-c">
            <div class="div-b"></div>
            
        </div>
        <div class="div-translate-d">
            <div class="div-b"></div>
            
        </div>
    </div>
    
</body>
</html>

人已赞赏
HTML+CSS

分享一下前端table表格自适应方案

2020-4-23 12:54:13

HTML+CSS

分享二个css3属性antialiased;与 grayscale;

2020-8-5 10:51:57

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索