【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;
}

效果：