CSS基礎知識總結（4）

Tomhard發表於2024-07-07
CSS

1、使用CSS繪製一些簡單的圖形。

A：正方形

        #square{
            width: 100px;
            height: 100px;
            background-color: red;
        }

B：圓形

1         #square{
2             width: 100px;
3             height: 100px;
4             border-radius: 50%;
5             background-color: red;
6         }

C：橢圓形

        #square{
            width: 200px;
            height: 100px;
            border-radius: 50%;
            background-color: red;
        }

D：向上三角形

#square{
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid red;/*注意，我們的border-wodth指的是border的高*/
}

E：向下三角形

        #square{
            width: 0;
            height: 0;
            border-top: 100px solid red;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
        }

F：左三角形：

        #square{
            width: 0;
            height: 0;
            border-left: 100px solid red;
            border-top: 50px solid transparent;
            border-bottom: 50px solid transparent;
        }

G：左上角三角形

        #square{
            width: 0;
            height: 0;
            border-left: 50px solid red;
            border-top: 50px solid red;
            border-bottom: 50px solid transparent;
            border-right: 50px solid transparent;
        }

H：右上角三角形

        #square{
            width: 0;
            height: 0;
            border-top: 100px solid red;
            border-left: 100px solid transparent;
        }

I：尾部彎曲的箭頭

        #arrow{
            position: relative;
            width: 0;
            height: 0;
            border-top: 9px solid transparent;
            border-right: 9px solid red;
            transform: rotate(10deg);
        }

        #arrow::after{
            content: "";
            position: absolute;
            border: 0px solid transparent;
            border-top: 3px solid red;
            border-radius: 15px 0 0 0;
            width: 12px;
            height: 12px;
            top: -12px;
            left: -9px;
            transform: rotate(45deg);
        }

相關文章