1
A
回答
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 transforms與skewY:
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>
相關問題
- 1. 使用CSS創建自定義形狀
- 2. 如何創建自定義形狀
- 3. 創建CSS3形狀?
- 4. 用自定義形狀創建UIView
- 5. 如何使用自定義形狀創建QML滑塊?
- 6. 如何使用自定義形狀創建UIView?
- 7. 如何使用CSS創建自定義形狀?
- 8. 如何在win32中創建自定義形狀控件C++
- 9. 如何在PyQt中創建自定義形狀QPushBtn
- 10. 如何在Powerpoint中創建自定義形狀菜單
- 11. 使自定義形狀的DIV + CSS HTML
- 12. android創建自定義形狀佈局
- 13. Actionscript 2:創建自定義形狀
- 14. THREE.JS創建自定義3D形狀
- 15. 爲按鈕創建自定義形狀
- 16. 創建自定義形狀文件
- 17. 如何在Android中使用XML作爲drawable來創建自定義形狀?
- 18. MS Visio中如何創建自定義形狀
- 19. Android:如何在鍵盤上創建自定義形狀鍵?
- 20. 如何使用純CSS3創建此形狀?
- 21. 用CSS3創建這個形狀?
- 22. 在圓角創建CSS3形狀?
- 23. 使用2個形狀創建自定義漸變
- 24. 使用自定義形狀的洞創建圖層蒙版
- 25. R:使用ggplot創建自定義形狀
- 26. 如何在android中用選擇器創建自定義形狀按鈕?
- 27. 如何創建自定義形狀的按鈕,Android的
- 28. 如何創建寬度不同的自定義形狀
- 29. 如何創建自定義SSRS報表形狀?
- 30. FFMPEG,如何創建自定義波形
嘗試CSS3來變換 – Dipak