使用transform和border实现五角红星

最新推荐文章于 2024-08-13 15:12:43 发布

Volcano_WQL

最新推荐文章于 2024-08-13 15:12:43 发布

阅读量147

点赞数

文章标签： html5

本文链接：https://blog.csdn.net/qq_45614713/article/details/108545506

版权

使用transform和border实现五角红星


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>五角星</title>
    <style>
        #star-five {
            top:100px;
            left:100px;
            margin: 50px 0;
            position: relative;
            display: block;
            width: 0px;
            height: 0px;
            border-right:100px solid transparent;
            border-bottom:70px  solid red;
            border-left:100px solid transparent;
            border-top:70px solid  transparent;
            transform:rotate(35deg);
        }
        #star-five:before {
            position: absolute;
            display: block;
            content: '';
            width: 0px;
            height: 0px;
            left: -105px;
            top: 3px;
            border-right: 100px solid transparent;
            border-bottom: 70px solid red;
            border-left: 100px solid transparent;
            transform: rotate(-70deg);
        }
        #star-five:after {
            position: absolute;
            display: block;
            content: '';
            top: 3px;
            left: -105px;
            width: 0;
            height: 0;
            border-right: 100px solid transparent;
            border-bottom: 70px solid red;
            border-left: 100px solid transparent;
            transform: rotate(216deg);
        }
    </style>
</head>
<body>
<!--三个等腰三角形组合而成-->
<div id="star-five"></div>
</body>
</html>

Volcano_WQL

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用transform和border实现五角红星

使用transform和border实现五角红星<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>五角星</title> <style> #star-five { top:100px; left:100px; margin
复制链接

扫一扫