【HTML】 - CSS繪製圖形

1.繪製三角形：

以上效果css爲：

<div class="box">
    <div class="triangle"></div>
</div>

<style>
    .triangle{
        width: 0;
        height: 0;
        border: 100px solid;
        border-color: red green dodgerblue yellow;
    }
</style>

因此下三角樣式設置爲：

<style>
    .triangle{
        width: 0;
        height: 0;
        border: 100px solid;
        border-color: red transparent transparent transparent;
    }
</style>
效果爲：

上三角樣式設置爲：

<style>
    .triangle{
        width: 0;
        height: 0;
        border: 100px solid;
        border-color: transparent transparent dodgerblue transparent;
    }
</style>

效果爲：

2. 繪製平行四邊形

樣式：

.rhomboid{
    width: 150px;
    height:100px;
    background: #ff00ff;
    -webkit-transform: skew(20deg);
    -moz-transform: skew(20deg);
    transform: skew(20deg);
}

效果：

3.等腰梯形

樣式：

.trapezoid{
    height: 0;
    width: 100px;
    border-bottom: 100px solid forestgreen;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
}
效果：

4.菜單圖標

樣式：

.menu{
    width: 120px;
    height: 20px;
    border-top: 60px double;
    border-bottom: 20px solid;
}

效果：