2016-04-13 79 views

回答

1

更多信息您可以使用transform:skew() CSS屬性

這裏是一個代碼示例

.rect { 
 
    width:100px; 
 
    height: 50px; 
 
    background: red; 
 
} 
 

 
.skew { 
 
    width: 100px; 
 
    height: 50px; 
 
    background:#33FF99; 
 
    transform:skew(0deg,-27deg); 
 
} 
 

 
.r1, .r2, .s1{ 
 
    position:absolute; 
 
} 
 

 
.r1{ 
 
    top:60px; 
 
    left:0; 
 
} 
 

 
.r2 { 
 
    top:10px; 
 
    left:200px; 
 
} 
 

 
.s1{ 
 
    top:35px; 
 
    left:100px; 
 
}
<div class="rect r1"></div> 
 
<div class="skew s1"></div> 
 
<div class="rect r2"></div>

+1

非常感謝Mr.fbid,其完美的形狀。 –

3

您可以使用CSS 2D transformsskewY

div{ 
 
    position:relative; 
 
    width:200px; height:50px; 
 
    background:green; 
 
    margin:0 100px; 
 
    transform-origin:100% 0; 
 
    transform:skewY(-30deg); 
 
} 
 
div:before, div:after{ 
 
    content:''; 
 
    position:absolute; 
 
    top:0; 
 
    width:50%; height:100%; 
 
    transform:skewY(30deg); 
 
    background:red; 
 
} 
 
div:before{ 
 
    right:100%; 
 
    transform-origin:100% 0; 
 
} 
 
div:after{ 
 
    left:100%; 
 
    transform-origin:0 0; 
 
}
<div></div>

請注意,你需要根據你的需要支持的瀏覽器添加的供應商前綴。在canIuse

+0

謝謝Mr.web-提基。它的完美形狀,我想.. –

2

transform: skewY(Ndeg)得到的角度效果,那麼無論是利潤還是transform: translateY(Npx)垂直移動div。工作示例:

.red, 
 
.green { 
 
    width: 100px; 
 
    height: 50px; 
 
    float: left; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    line-height: 50px; 
 
} 
 

 
.red { 
 
    background: red; 
 
} 
 

 
.green { 
 
    background: lime; 
 
} 
 

 
.first { 
 
    /*margin-top:56px;*/ 
 
    transform: translateY(56px) 
 
} 
 

 
.second { 
 
    transform: skewY(150deg) translateY(28px); 
 
    /*transform: skewY(150deg); 
 
    margin-top:28px;*/ 
 
} 
 

 
.second span { 
 
    transform: skewY(30deg); 
 
    display: inline-block; 
 
} 
 

 
.third {}
<div id="container"> 
 
    <div class="red first"><span>div</span></div> 
 
    <div class="green second"><span>div</span></div> 
 
    <div class="red third"><span>div</span></div> 
 
</div>