![](/img/trans.png)
[英]How can I skew one side of a div and then replicate it and skew a different side?
[英]Create skew div side by side
如何使用兩個div創建像圖像一樣的圖像?
我搜索了許多使用過的偏斜,但嘗試了一下,但並沒有完全像圖像一樣。 僅使div傾斜。 不是里面的內容。
這是我嘗試過的:
.container{ width: 100%; } .left{ float: left; background: red; height: 50px; width: 50%; -ms-transform: skew(-30deg, 0deg); -webkit-transform: skew(-30deg, 0deg); transform: skew(-30deg, 0deg); } .right{ float: left; background-color: #666; height: 50px; width: 50%; }
<div class="container"> <div class="left"> LEFT </div> <div class="right"> RIGHT </div> </div>
這怎么樣。 我使用了漸變背景和CSS網格在內部創建了兩個不傾斜的div。 注意事項:
.container { background: linear-gradient(45deg,#FF0000 50%,#666666 50%); display: grid; grid-template-columns: auto auto; width: 100%; } .side { background-color: transparent; color: #FFFFFF; height: 50px; }
<div class="container"> <div class="side"> test </div> <div class="side"> test </div> </div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.