How to transform each side of a shape separately?

by

I don’t think there is any way in CSS to pick and transform each side separately but you can achieve the shape in question by using perspective transforms (pure CSS).

Rotating the element with perspective along both X and Y axes sort of produces the effect of each side having a separate transformation. You can adjust the angles and the perspective setting to create the shape exactly as required.

.shape {
  background: black;
  margin: 100px;
  height: 200px;
  width: 200px;
  transform: perspective(20px) rotateX(-2deg) rotateY(-1deg); /* make perspective roughly 10% of height and width */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="shape"></div>

Or, you could make use of the clip-path feature. Clip paths can be created either by using CSS alone or by using inline SVG. SVG clip paths have much better browser support than the CSS version.

div {
  height: 200px;
  width: 200px;
  background: black;
}
.css-clip {
  -webkit-clip-path: polygon(0% 10%, 100% 0%, 85% 100%, 15% 95%);
  clip-path: polygon(0% 10%, 100% 0%, 85% 100%, 15% 95%);
}
.svg-clip {
  -webkit-clip-path: url(#clipper);
  clip-path: url(#clipper);
}

/* Just for demo */

div{
  display: inline-block;
  margin: 10px;
  line-height: 200px;
  text-align: center;
  color: beige;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<!-- CSS Clip path -->
<div class="css-clip">CSS Clip Path</div>

<!-- SVG Clip path -->
<svg width="0" height="0">
  <defs>
    <clipPath id='clipper' clipPathUnits="objectBoundingBox">
      <path d='M0 0.1, 1 0, 0.85 1, 0.15 0.95' />
    </clipPath>
    </defs>
</svg>
<div class="svg-clip">SVG Clip path</div>

Note: Though this shape can be achieved using CSS, it is better not to use CSS for such complex shapes.

More Related Contents:

  1. I want to get this CSS shape and have a background puicture inside it
  2. Element will not stay centered, especially when re-sizing screen
  3. Responsive grid of hexagons
  4. Curve bottom side of the div to the inside with CSS
  5. Html/Css Triangle with pseudo elements
  6. CSS Progress Circle
  7. How to use CSS to surround a number with a circle?
  8. Elongated hexagon shaped button using only one element
  9. html/css hexagon with image inside
  10. Unskewing the ends of an assortment multiple skewed images
  11. Easier way to create circle div than using an image?
  12. HTML5 / CSS3 Circle with Partial Border
  13. Create a slanted edge to a div [duplicate]
  14. Draw Circle using css alone [duplicate]
  15. Creating a ‘New’ spiky label with 24 or above point burst
  16. Half circle with CSS (border, outline only)
  17. How to add border to a container with transparent gaps in between
  18. Slanted diagonal line in html or css?
  19. How can I make a 45 degree responsive ribbon with folded corner?
  20. Border with a transparent centred arrow
  21. Add outward curving border to elements like this: ◝◟___◞◜
  22. How to create a curved speech bubble?
  23. How can I make a div with irregular shapes with css3 and html5?
  24. How can I create a wavy shape CSS?
  25. How to Make A Chevron Arrow Using CSS?
  26. Position fixed doesn’t work when using -webkit-transform
  27. div with triangle at the bottom with background image
  28. Responsive CSS Circles
  29. How do I create a teardrop in HTML?
  30. How to create a ribbon shape in CSS

Leave a Comment