How to create an irregular square shape in css?

by

You can do it with some rotation and perspective:

.box {
  width: 150px;
  height: 120px;
  background: #f540a8;
  margin: 20px;
  transform: perspective(180px) rotateX(15deg) rotateY(20deg) rotateZ(-3deg);
}
<div class="box">
</div>

Or using SVG:

<svg viewBox="0 0 200 200" width=200>
  <polygon points="20,0 150,20 170,130 0,150" fill="#f540a8" /> 
</svg>

And also using gradient (but without transparency):

.box {
  width: 150px;
  height: 120px;
  background: 
    linear-gradient(to top right, transparent 46%,#fff 50%) right/10px 100%,
    linear-gradient(to top right, transparent 46%,#fff 50%) top/100% 10px,
    linear-gradient(to bottom right, transparent 46%,#fff 50%) bottom/100% 10px,
    linear-gradient(to top left, transparent 46%,#fff 50%) left/10px 100%, 
    #f540a8;
  background-repeat:no-repeat;
  margin: 20px;
}
<div class="box">
</div>

More Related Contents:

  1. How do CSS triangles work?
  2. Speech bubble with arrow
  3. Line before and after title over image [duplicate]
  4. Transparent text cut out of background
  5. CSS Only Pie Chart – How to add spacing/padding between slices?
  6. Control the dashed border stroke length and distance between strokes
  7. CSS transparent curved shape with two rounded sides
  8. How to draw a circle with text in the middle?
  9. CSS 3 Shape: “Inverse Circle” or “Cut Out Circle”
  10. Is it possible to create an angled corner in CSS?
  11. How to draw a circle sector in CSS?
  12. draw diagonal lines in div background with CSS
  13. Outlining and partially filling an SVG Shape
  14. Hexagon shape with CSS3
  15. Is a concave border radius possible?
  16. Align text on slanted line
  17. background image, linear gradient jagged edged result needs to be smooth edged
  18. Circle with two borders
  19. Blocky gradient effect in CSS3
  20. Border within border CSS
  21. Half hexagon shape with one element
  22. How to create a radial menu in CSS?
  23. Arrow Box with CSS
  24. Transparent hollow or cut out shape in HTML
  25. Make CSS3 triangle with linear gradient
  26. Creating an Isoceles Trapezoid shape
  27. Rounded side, not rounded corners
  28. Creating a droplet like border effect in css
  29. Making jagged triangle border in CSS
  30. How to create fluid trapezoid image with css?

Leave a Comment