CSS3 Transform Skew One Side

by

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/

More Related Contents:

  1. How to make double border on left only with thick outside and thin inside [duplicate]
  2. Cut Corners using CSS
  3. Transparent half circle cut out of a div
  4. Curve bottom side of the div to the inside with CSS
  5. Can I create a div with a Curved bottom?
  6. How to make this arrow in CSS only?
  7. CSS Progress Circle
  8. Shape with a slanted side (responsive)
  9. Elongated hexagon shaped button using only one element
  10. How to make a curved edge hexagon by using CSS
  11. How to draw circle in html page?
  12. Responsive CSS Trapezoid Shape
  13. Circular percent progress bar
  14. Generate repeating hexagonal pattern with CSS3
  15. How to create a curve between two gradient using CSS?
  16. How does this CSS produce a circle?
  17. Hexagon shape with a border/outline
  18. How to draw a trapezium/trapezoid with css3?
  19. How to create a transparent triangle with border using CSS?
  20. CSS Speech Bubble with Box Shadow
  21. Center Triangle at Bottom of Div
  22. CSS box shadow around a custom shape?
  23. Skewed Borders on a Div
  24. How can I create a wavy shape CSS?
  25. How to Make A Chevron Arrow Using CSS?
  26. Title with bottom border smaller than width
  27. CSS Zigzag Border with a Textured Background
  28. Square DIV where height is equal to viewport
  29. How to transform each side of a shape separately?
  30. How to create a ribbon shape in CSS

Leave a Comment