圓角直角梯形是我們常常需要在網頁上使用的一個形狀。下面我們來學習如何使用css實現(xiàn)帶圓角直角梯形。

.trapezoid {
border-top: 50px solid #555;
border-right: 20px solid transparent;
border-bottom: 0 solid transparent;
border-left: 20px solid transparent;
width: 100px;
height: 0;
}

上面的代碼實現(xiàn)了一個基本的直角梯形，但是它沒有圓角。下面我們來看如何添加圓角。

.trapezoid-rounded {
overflow: hidden;
position: relative;
width: 120px;
height: 50px;
padding: 0 20px;
background: #555;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.trapezoid-rounded:before {
content: "";
position: absolute;
top: 0;
left: -10px;
width: 0;
height: 0;
border-style: solid;
border-width: 0 10px 50px 10px;
border-color: transparent transparent #555 transparent;
}
.trapezoid-rounded:after {
content: "";
position: absolute;
bottom: 0;
left: -10px;
width: 0;
height: 0;
border-style: solid;
border-width: 50px 10px 0 10px;
border-color: #555 transparent transparent transparent;
}

上面的代碼實現(xiàn)了一個帶圓角的直角梯形。我們使用了before和after偽元素來實現(xiàn)不同方向的三角形部分，并使用border-radius來實現(xiàn)圓角。