用CSS画五角星

Posted 2020-08-02 淡烘糕

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了用CSS画五角星相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>五角星</title>
    <style>
        #star-five {
            margin: 50px;
            position: relative;
            display: block;
            color: red;
            width: 0;
            height: 0;
            border-right:  100px solid transparent;
            border-bottom: 70px  solid red;
            border-left:   100px solid transparent;
            /*-moz-transform:    rotate(35deg);*/
            /*-webkit-transform: rotate(35deg);*/
            /*-ms-transform:     rotate(35deg);*/
            /*-o-transform:      rotate(35deg);*/
            transform: rotate(35deg);
        }
        #star-five:before {
            border-bottom: 80px solid red;
            border-left: 30px solid transparent;
            border-right: 30px solid transparent;
            position: absolute;
            height: 0;
            width: 0;
            top: -45px;
            left: -65px;
            display: block;
/*下面这条代码是必须的，表示在#star-five盒子之前插入一个非空的盒子*/
            content: ‘‘;
            -webkit-transform: rotate(-35deg);
            -moz-transform:    rotate(-35deg);
            -ms-transform:     rotate(-35deg);
            -o-transform:      rotate(-35deg);

        }
        #star-five:after {
            position: absolute;
            display: block;
            color: red;
            top: 3px;
            left: -105px;
            width: 0;
            height: 0;
            border-right: 100px solid transparent;
            border-bottom: 70px solid red;
            border-left: 100px solid transparent;
            -webkit-transform: rotate(-70deg);
            -moz-transform:    rotate(-70deg);
            -ms-transform:     rotate(-70deg);
            -o-transform:      rotate(-70deg);
            content: ‘‘;
        }

    </style>
</head>
<body>
<div id="star-five"></div>
</body>
</html>

以上是关于用CSS画五角星的主要内容，如果未能解决你的问题，请参考以下文章

前端面试 CSS— 如何用CSS画一个五角星

怎么用python画三角形并填色？以及画五角星并且填色？（急！！！）