Skewed Borders on a Div

by

I was able to make something very similar.. it works in all modern browsers.

enter image description here

HTML – Pretty simple

div:nth-child(1) {
  background: rgb(122, 206, 122);
  height: 140px;
  transform: skew(-10deg) rotate(2deg);
  -webkit-transform: skew(-10deg) rotate(2deg);
  -moz-transform: skew(-10deg) rotate(2deg);
}

div:nth-child(1) p {
  transform: skew(10deg) rotate(-2deg);
  -webkit-transform: skew(10deg) rotate(-2deg);
  -moz-transform: skew(10deg) rotate(-2deg);
  padding: 3% 2%;
}

div:nth-child(2) {
  border-bottom: 180px solid rgb(233, 233, 65);
  border-left: 8px solid transparent;
  border-right: 14px solid transparent;
  height: 0;
  margin-top: 60px;
  transform: rotate(3deg);
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
}

div:nth-child(2) p {
  transform: rotate(-3deg);
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  padding: 3.5% 3%;
}

div:nth-child(3) {
  border-top: 140px solid rgb(253, 74, 74);
  border-left: 23px solid transparent;
  border-right: 14px solid transparent;
  height: 0;
  margin-top: 20px;
  transform: rotate(2deg);
  -webkit-transform: rotate(2deg);
  -moz-transform: rotate(2deg);
}

div:nth-child(3) p {
  transform: rotate(-2deg);
  -webkit-transform: rotate(-2deg);
  -moz-transform: rotate(-2deg);
  position: absolute;
  top: -140px;
  padding: 3% 3%;
}

div:nth-child(3):before {
  content: '';
  width: 124%;
  height: 80px;
  background: white;
  position: absolute;
  left: -20%;
  bottom: 120px;
  transform: rotate(-2deg);
  -webkit-transform: rotate(-2deg);
  -moz-transform: rotate(-2deg);
}
<div>
  <p>text..</p>
</div>

<div>
  <p>text..</p>
</div>

<div>
  <p>text..</p>
</div>

Full Screen Demo —- jsFiddle demo

More Related Contents:

  1. How to make double border on left only with thick outside and thin inside [duplicate]
  2. Transparent half circle cut out of a div
  3. Curve bottom side of the div to the inside with CSS
  4. Can I create a div with a Curved bottom?
  5. How to make this arrow in CSS only?
  6. CSS Progress Circle
  7. Shape with a slanted side (responsive)
  8. CSS3 Transform Skew One Side
  9. Elongated hexagon shaped button using only one element
  10. Circular percent progress bar
  11. Generate repeating hexagonal pattern with CSS3
  12. How to create a curve between two gradient using CSS?
  13. How does this CSS produce a circle?
  14. Easier way to create circle div than using an image?
  15. HTML5 / CSS3 Circle with Partial Border
  16. How to draw a trapezium/trapezoid with css3?
  17. How to create a transparent triangle with border using CSS?
  18. CSS Speech Bubble with Box Shadow
  19. Draw Circle using css alone [duplicate]
  20. Center Triangle at Bottom of Div
  21. How to add border to a container with transparent gaps in between
  22. How to create a curved speech bubble?
  23. How can I create a wavy shape CSS?
  24. How to Make A Chevron Arrow Using CSS?
  25. Title with bottom border smaller than width
  26. CSS Zigzag Border with a Textured Background
  27. Square DIV where height is equal to viewport
  28. How to create a heart shape using CSS?
  29. Make plus symbol in CSS
  30. Create wavy borders in CSS for top and bottom borders

Leave a Comment