25 CSS Hacks Every Developer Should Know

CSS shape outsiders

Problem: creating non-rectangular shapes.

Solution: use `clip-path`.

.clip-path {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  background-color: #3498db;
  width: 200px;
  height: 200px;
}