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

久伴
久伴
久伴
675
文章
549
评论
2020年6月9日12:30:58 评论 264 3769字阅读12分33秒

效果截图

利用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>
久伴
css清除浮动方法 HTML+CSS

css清除浮动方法

浮动的产生会带来哪些问题,大家看一下例子 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF...
分享二个css3属性antialiased;与 grayscale; HTML+CSS

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

前言  分享二个可以使网站字体抗锯齿高清的CSS属性 CSS3里面加入了一个“-webkit-font-smoothing”属性。 这个属性可以使页面上的字体抗锯齿,使用后字体看起来会更清晰舒服。 加...
分享一下前端table表格自适应方案 HTML+CSS

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

现在前端框架满天飞,bootstrap,mdui,meiziUI,element等等框架,使用框架自带的table类基本三二分钟就搞定一个自适应的table表格,但是实现的方案,大家了解吗 久伴在一次...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: