Is it possible to create "CSS3 Transform Skew One Side"
I found one solution, but it's not useful to me, because I need to use a image for background (not color)
#skewOneSide { border-bottom: 40px solid #FF0000; border-left: 50px solid rgba(0, 0, 0, 0); height: 0; line-height: 40px; width: 100px; }
Even this JsFiddle is not useful as well (skewed area should be transparent)
Try this: To unskew the image use a nested div for the image and give it the opposite skew value. So if you had 20deg on the parent then you can give the nested (image) div a skew value of -20deg. @darthmaim's answer (below) to use a psuedo (before or after) to skew the inner border's should be the accepted answer.
CSS | skew() FunctionThe skew() function is an inbuilt function which is used to transform an element in the 2D plane. Skew an element means to pick a point and push or pull it in different directions. Parameters: ax: This parameter holds the angle representing the horizontal axis to distort an element.
To skew in both the direction we must use skewX \() and skewY() function in the transform property. 1. Transform: skewY(-20deg);
Try this:
To unskew the image use a nested div for the image and give it the opposite skew value. So if you had 20deg on the parent then you can give the nested (image) div a skew value of -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>
The example:
http://jsfiddle.net/diegoh/mXLgF/1154/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With