如何利用css來畫出各種樣式不同的梯形

這篇文章將為大家詳細講解有關如何利用css來畫出各種樣式不同的梯形，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

首先我們要知道一下四個非常重要的樣式：

border-buttom:設置下邊框

border-top:

border-left:

border-right:

<div class="mask"></div>

.mask
{
    height: 0;
    width: 100px;
    border-top: 100px solid red;
    border-right: 37px solid transparent;
}

.mask
        {
            width:100px;
            height:0;
            border-width:0 37px 100px 37px;
            border-style:none solid solid;
            border-color:transparent transparent red;
        }

.mask
        {
            width:100px;
            height:0;
            border-top: 100px solid red;
            border-right: 37px solid transparent;
            border-left:37px solid transparent;
        }

 .mask
        {
            width:100px;
            height:0;
            border-top:100px solid red;
            border-left:37px solid transparent;
        }

還有一些奇怪的圖形 自己開發去。

.mask
        {
            width:100px;
            height:0;
            border-bottom:100px solid red;
            border-left:37px solid transparent;
            margin-left: -30px;
        }

關于“如何利用css來畫出各種樣式不同的梯形”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。