如何使用 DIV 和 css 将两个梯形并排放置答案

【问题标题】：How to put two trapezoids one beside another using DIVs and css如何使用 DIV 和 css 将两个梯形并排放置
【发布时间】：2014-09-02 11:35:35
【问题描述】：

我正在尝试将两个divs 放在旁边，以使其看起来像所附图片。

它不能是svg文件，必须用css和div来完成，有什么想法吗？！

编辑：

我的代码：

<style type="text/css">
*, *:before, *:after{ 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
} 
.left{ 
    position: relative; 
    height: 170px; 
    width: 0px; 
    padding: 0px; 

    -webkit-transform: skew(0deg); 
    transform: skew(0deg); 
    border-top: 56px solid transparent; 
    border-left: 0px transparent; 
    border-right: 144px solid #ffaf32; 
    border-bottom: 60px solid transparent; 
}


.right{ 
    position: relative; 
    height: 200px; 
    width: 0px; 

    border-top: 50px solid transparent; 
    border-left: 300px solid rgba(0, 0, 0, 0.55); 
    border-right: 0px transparent; 
    border-bottom: 49px solid transparent; 
}




</style>



<div class="left"></div>
<div class="right"></div>

如何把它放在图片旁边？

更新：

没关系，我做到了。

<style type="text/css">
*, *:before, *:after{ 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
} 
.left{ 
    position: relative; 
    height: 170px; 
    width: 0px; 
    padding: 0px; 

    -webkit-transform: skew(0deg); 
    transform: skew(0deg); 
    border-top: 56px solid transparent; 
    border-left: 0px transparent; 
    border-right: 144px solid #ffaf32; 
    border-bottom: 60px solid transparent; 

 float: left;

            text-align: right;
            width: 80px;

}

.right{ 
    position: relative; 
    height: 170px; 
    width: 0px; 

    border-top: 50px solid transparent; 
    border-left: 300px solid rgba(0, 0, 0, 0.55); 
    border-right: 0px transparent; 
    border-bottom: 49px solid transparent; 

            margin-left: 144px;

}

</style>

<div class="left"></div>
<div class="right"></div>

提前致谢。

【问题讨论】：

显示您尝试过的代码。
几个...但我们不是来为您编写代码的。向我们展示您迄今为止所做的尝试，我们可能会在棘手的部分为您提供帮助。
绘制梯形非常容易。一点点搜索会给你css技巧网站的链接。在这里：jsfiddle.net/4CKW5 贴一些代码，人们更有可能帮助你。这应该足以让你开始
发布您的解决方案作为答案，并在可能的情况下接受它。不要只是在原始帖子中发布您的解决方案并保留它。

标签： html css each

【解决方案1】：

我不是专家，但根据发布的 cmets，我想出了这个：

http://jsfiddle.net/4CKW5/6/

HTML：

<div id="trapezoid-left"></div>
<div id="trapezoid-right"></div>

CSS：

div { width: 0px; border: 0px solid Green; float: left}

#trapezoid-left {
    width: 0;
    height: 100px;
    border-top: 100px solid transparent;
    border-right: 200px solid red;
    border-bottom: 100px solid transparent;
}
#trapezoid-right {
    width: 0;
    height: 100px;
    border-top: 100px solid transparent;
    border-left: 400px solid blue;
    border-bottom: 100px solid transparent;
}

【讨论】：

【解决方案2】：

答案：

<style type="text/css">
*, *:before, *:after{ 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
} 
.left{ 
    position: relative; 
    height: 170px; 
    width: 0px; 
    padding: 0px; 

    -webkit-transform: skew(0deg); 
    transform: skew(0deg); 
    border-top: 56px solid transparent; 
    border-left: 0px transparent; 
    border-right: 144px solid #ffaf32; 
    border-bottom: 60px solid transparent; 

 float: left;

            text-align: right;
            width: 80px;

}


.right{ 
    position: relative; 
    height: 170px; 
    width: 0px; 

    border-top: 50px solid transparent; 
    border-left: 300px solid rgba(0, 0, 0, 0.55); 
    border-right: 0px transparent; 
    border-bottom: 49px solid transparent; 

            margin-left: 144px;

}




</style>

<div class="left"></div>
<div class="right"></div>

【讨论】：