Question

我试图将两个div放在旁边看起来像附图。

它不能是一个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>

提前致谢。

Answer 1

我不是专家，但根据发布的评论，我提出了这个问题：

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

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

如何使用DIV和css将两个梯形放在另一个旁边

2 个答案: