为了账号安全,请及时绑定邮箱和手机立即绑定
首页 手记 【九月打卡】第5天 前端工程师学习笔记

【九月打卡】第5天 前端工程师学习笔记

2022.09.19 21:03 16浏览

课程信息

    课程名称:前端工程师

    课程章节:第三周 绘制五星红旗

    课程讲师:

课程内容:

<!DOCTYPE html>


<html>


<head>


<meta charset="utf-8">


<title>五星红旗</title>


<style type="text/css">

/* 此处写代码*/


* {


padding: 0;


margin: 0;


}


.flag {


width: 300px;


height: 200px;


background-color: rgb(218, 37, 29);


position: relative;


margin: auto;


}


.flag .star {


position: absolute;


left: 30px;


top: 50px;


border: 30px solid transparent;


border-top: 20px solid yellow;


}


.flag .star::before {


left: -44px;


top: -30px;


content: "";


position: absolute;


border: 30px solid transparent;


border-top: 20px solid yellow;


transform: rotate(70deg);


}


.flag .star::after {


content: "";


position: absolute;


left: -18px;


top: -30px;


border: 30px solid transparent;


border-top: 20px solid yellow;


transform: rotate(292deg);


}


.flag .one {


transform: scale(1);


}


.flag .two {


left: 80px;


top: 10px;


transform: rotate(25deg) scale(0.4);


}


.flag .three {


left: 100px;


top: 30px;


transform: rotate(45deg) scale(0.4);


}


.flag .four {


left: 100px;


top: 60px;


transform: rotate(65deg) scale(0.4);


}


.flag .five {


left: 80px;


top: 80px;


transform: rotate(85deg) scale(0.4);


}

</style>


</head>


<body>


<!-- 此处写代码 -->


<div class="flag">


<div class="star one"></div>


<div class="star two"></div>


<div class="star three"></div>


<div class="star four"></div>


<div class="star five"></div>


</div>


</body>


</html>


点击查看更多内容
0人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
0
获赞与收藏
0

关注TA,一起探索更多经验知识

同主题相似文章浏览排行榜

风间影月说签约讲师

50篇手记,涉及Java、MySQL、Redis、Spring等方向

进入讨论

Tony Bai 说签约讲师

146篇手记,涉及Go、C、Java、Python等方向

进入讨论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消