如何使两侧（左下角和右下角）具有不同的高度？

我有一个想要实现的设计，我觉得有点难以描述我的问题。如何使两侧（左下角和右下角）具有不同的高度？

我已经试过看转换，但它不是我需要的，因为转换旋转div而不是制作对角线的结尾。使用其他函数可以实现这个功能吗？

来源

2014-10-28 Joseph118

你可以使用CSS3转换skewY（）功能与家长和负值为孩子包装元素，以达到效果正值。

看看这个演示DEMO

或者使用transform: rotate(45deg);旋转一个div。

来源

2014-10-28 04:56:33

将离开顶部DIV差距，但我想我可以把另一个DIV它的下面。这是唯一可能的方法吗？编辑：看一看歪斜 – Joseph118 2014-10-28 05:01:50

是的，这可以通过在这里使用multi-pal divs实现非矩形布局与CSS形状教程http://sarasoueidan.com/blog/css-shapes/ – 2014-10-28 05:03:34

您可以形状尝试： -

*{margin: 0px;padding: 0px;} 
 
    .container{width: 240px;margin:45px auto 0;} 
 
.trapezoid { 
 
    width: 0; 
 
    height: 50px; 
 
    border-style: solid; 
 
    border-width:40px 0 40px 240px; 
 
    border-color: transparent; 
 
    border-left-color: black; 
 
    margin-top: -40px; 
 
} 
 
.trapezoid:nth-child(odd){ 
 
\t border-color: transparent red transparent transparent; 
 
\t border-width:40px 240px 40px 0; 
 

 
}

<div class="container"> 
 
    <div class="trapezoid"></div> 
 
    <div class="trapezoid"></div> 
 
    <div class="trapezoid"></div> 
 
    <div class="trapezoid"></div> 
 
    <div class="trapezoid"></div> 
 
</div>

来源

2014-10-28 05:26:06

如何使两侧（左下角和右下角）具有不同的高度？

回答

相关问题