CSS3改变偏斜的一面

是否有可能创build“CSS3变形偏斜一侧”

我find了一个解决scheme，但它对我没有用处，因为我需要使用图像作为背景（而不是颜色）

#skewOneSide { border-bottom: 40px solid #FF0000; border-left: 50px solid rgba(0, 0, 0, 0); height: 0; line-height: 40px; width: 100px; } 

即使这个JsFiddle也没用 （偏斜的区域应该是透明的）

Answer 1

尝试这个：

要扭曲的图像使用嵌套的div的图像，并给它相反的歪斜值。 所以，如果你有20deg的父母，那么你可以给嵌套（图像）股利倾斜值-20deg。

 .container { overflow: hidden; } #parallelogram { width: 150px; height: 100px; margin: 0 0 0 -20px; -webkit-transform: skew(20deg); -moz-transform: skew(20deg); -o-transform: skew(20deg); background: red; overflow: hidden; position: relative; } .image { background: url(http://placekitten.com/301/301); position: absolute; top: -30px; left: -30px; right: -30px; bottom: -30px; -webkit-transform: skew(-20deg); -moz-transform: skew(-20deg); -o-transform: skew(-20deg); } 

 <div class="container"> <div id="parallelogram"> <div class="image"></div> </div> </div> 

Answer 2

我知道这是旧的，但我想build议使用线性渐变来实现相同的效果，而不是边距偏移量。 这将保持在原来的地方的任何内容。

http://jsfiddle.net/zwXaf/2/

HTML

 <ul> <li><a href="#">One</a></li> <li><a href="#">Two</a></li> <li><a href="#">Three</a></li> </ul> 

CSS

 /* reset */ ul, li, a { margin: 0; padding: 0; } /* nav stuff */ ul, li, a { display: inline-block; text-align: center; } /* appearance styling */ ul { /* hacks to make one side slant only */ overflow: hidden; background: linear-gradient(to right, red, white, white, red); } li { background-color: red; transform:skewX(-20deg); -ms-transform:skewX(-20deg); -webkit-transform:skewX(-20deg); } li a { padding: 3px 6px 3px 6px; color: #ffffff; text-decoration: none; width: 80px; transform:skewX(20deg); -ms-transform:skewX(20deg); -webkit-transform:skewX(20deg); } 

Answer 3

你可以使用转换和转换的起源。

结合不同的转换结果给出了相似的结果。 我希望你觉得它有帮助。 :)看到这些例子更简单的变换。 这留下了一点：

 div { width: 300px; height:200px; background-image: url('http://placecage.com/g/300/200'); -webkit-transform: perspective(300px) rotateX(-30deg); -o-transform: perspective(300px) rotateX(-30deg); -moz-transform: perspective(300px) rotateX(-30deg); -webkit-transform-origin: 100% 50%; -moz-transform-origin: 100% 50%; -o-transform-origin: 100% 50%; transform-origin: 100% 50%; margin: 10px 90px; } 

 <div></div> 

Answer 4

你可以尝试一下:before是非常接近的，唯一需要改变的是使用skew而不是边界： http : //jsfiddle.net/Hfkk7/1101/

编辑：你的边界的方法也会工作，你做错了唯一的事情就是在你的div之前的元素，所以透明边框wasnt显示。 如果你将伪元素放置在div的左边，那么所有东西都可以工作： http : //jsfiddle.net/Hfkk7/1102/