html5直角梯形原理,css如何让div变成直角梯形

如下图红线圈起来的部分怎么实现，首页案例和详情页案例可以分别切换

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

<ul class="example">

<li class="active">首页案例</li>

<li>首页案例</li>

</ul>

<style type="text/css">

.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: '';

}

</style>

以上是举个小例子。

以下原答案。

拼凑两个图形即可。

<div class="example"></div>

<style type="text/css">

.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;

}

</style>

HTML5的canvas以及svg可以做到，并不难，w3c手册上有教程

<div class='t1'><div>

.ti {

position: relative;

background-color: #4ca037;

width: 200px;

height: 200px;

}

.ti:after {

content: '';

position: absolute;

right: -100px;

top: 0;

width: 100px;

height: 200px;

border-left: 50px solid #3cb162;

border-right: 50px solid transparent;

border-bottom: 100px solid #3dbf59;

border-top: 100px solid transparent;

}

随便写着玩，你也就随便看看好了。

css揭秘中的答案 http://dabblet.com/gist/1345d…