[英]Create skew div side by side
How do i create like the image using two div? 如何使用两个div创建像图像一样的图像?
I have search many used skew and I tried but didn't get exactly like the image. 我搜索了许多使用过的偏斜,但尝试了一下,但并没有完全像图像一样。 only skew the div. 仅使div倾斜。 not the content inside. 不是里面的内容。
Here is what I have tried: 这是我尝试过的:
.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>
How is this. 这怎么样。 I used a gradient background and CSS grid to create two divs inside that are not skewed. 我使用了渐变背景和CSS网格在内部创建了两个不倾斜的div。 A couple of caveats: 注意事项:
.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.