css3旋轉屬性transform畫五角星

效果圖:
在這裏插入圖片描述

代碼:

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .start {
                width: 0;
                height: 0;
                margin: 80px auto;
                color: #ffffff;
                position: relative;
                border-right: 100px solid transparent;
                border-left: 100px solid transparent;
                border-bottom: 70px solid red;
                display: block;
                transform: rotate(35deg);
            }

            .start::before {
                content: "";
                height: 0px;
                width: 0px;
                position: absolute;
                display: block;
                top: -45px;
                left: -65px;
                border-right: 30px solid transparent;
                border-bottom: 80px solid red;
                border-left: 30px solid transparent;
                transform: rotate(-35deg);
            }

            .start::after {
                content: "";
                width: 0;
                height: 0;
                position: absolute;
                display: block;
                top: 3px;
                left: -105px;
                border-right: 100px solid transparent;
                border-bottom: 70px solid red;
                border-left: 100px solid transparent;
                transform: rotate(-70deg);
            }

        </style>
    </head>

    <body>
        <div class="start"> </div>
    </body>

</html>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章