css如何让div变成直角梯形

Question

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

Answer 1

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

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

Answer 2

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

Answer 3

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

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

Answer 4

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