CSS画五星旗

以晴0521

已于 2022-03-20 21:09:26 修改

阅读量434

点赞数

文章标签： css html5

于 2020-05-12 21:55:15 首次发布

本文链接：https://blog.csdn.net/qq_35180466/article/details/106086017

版权

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>2-3</title>
</head> 
<body>
    <div class="bg">
        <div class="star dad"></div>
        <div class="star son1"></div>
        <div class="star son2"></div>
        <div class="star son3"></div>
        <div class="star son4"></div>
    </div>
</body>
</html>

CSS样式如下：

.bg{
            width: 300px;
            height: 200px;
            background-color: red;
            position: relative;
        }
        .star{
            margin: 0 0;
            position: absolute;
            display: block;
            /* color: red; */
            width: 0;
            height: 0;
            border-right: 100px solid transparent;
            border-bottom: 70px solid yellow;/* */
            border-left: 100px solid transparent;
            transform: rotate(35deg);
            left: 20px;
  }
        .star:before {
            border-bottom: 80px solid yellow;
            border-left: 30px solid transparent;
            border-right: 30px solid transparent;
            position: absolute;
            height: 0;
            width: 0;
            top: -45px;
            left: -65px;
            display: block;
            content: '';
            transform: rotate(-35deg);
        }
        .star:after{
            content: '';
            margin: 0;
            position: absolute;
            display: block;
            /* color: red; */
            width: 0;
            height: 0;
            border-right: 100px solid transparent;
            border-bottom: 70px solid yellow;/* */
            border-left: 100px solid transparent;
            transform: rotate(-70deg);
            left: -107px;
            top: 5px;
        }
        .dad{
            /* position: absolute; */
            transform: scale(.3) rotate(35deg);
            top: 10px;
            left: -50px;
            z-index: 3;
        }
        .son1{
            position: absolute;
            transform: scale(.1) rotate(-60deg);
            top: -15px;
            left: 5px;
        }
        .son2{
            position: absolute;
            transform: scale(.1) rotate(-45deg);
            top: 5px;
            left: 30px;
        }
        .son3{
            position: absolute;
            transform: scale(.1) rotate(35deg);
            top: 33px;
            left: 30px;
        }
        .son4{
            position: absolute;
            transform: scale(.1) rotate(60deg);
            top: 50px;
            left: 5px;
        }

以晴0521

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS画五星旗

<!DOCTYPE HTML><html><head> <meta charset="utf-8"> <title>2-3</title></head> <body> <div class="bg"> <div class="star dad"></div> <div class="star son1"&gt
复制链接

扫一扫