如何做出html直角梯形效果,css如何让div变成直角梯形

题主请一开始就把问题说清楚好吧。

• 首页案例
• 首页案例

.example {

overflow: hidden;

background: #f5d7b7;

height: 44px;

padding: 0;

line-height: 44px;

}

.example > li {

float: left;

position: relative;

width: 50%;

text-align: center;

list-style: none;

}

.example > li:before, .example > li:after {

position: absolute;

top: 0;

}

.example > li:before {

width: 44px;

height: 44px;

right: -43px;

background: inherit;

}

.example > li:after {

right: -44px;

border: 22px solid;

border-color: transparent #f5d7b7 #f5d7b7 transparent;

}

.example > li.active {

background: -webkit-linear-gradient(top, #f3941d, #f3941d 50%, #f08513 50%, #f08513);

}

.example > li.active:before, .example > li.active:after {

content: '';

}

以上是举个小例子。

以下原答案。

拼凑两个图形即可。

.example {

position: relative;

width: 100px;

height: 50px;

color: #ffff00;

}

.example:before, .example:after {

content: '';

position: absolute;

top: 0;

}

.example:before {

left: 0;

width: 50px;

height: 50px;

background-color: currentColor;

}

.example:after {

right: 0;

border: 25px solid;

border-color: transparent transparent currentColor currentColor;

}