chihung
6/6/2019 - 2:44 AM

round corner div

round corner div

  border: 0;
  background: #c00;
  background:
    linear-gradient(135deg, transparent 10px, #c00 0) top left,
    linear-gradient(225deg, transparent 10px, #c00 0) top right,
    linear-gradient(315deg, transparent 10px, #c00 0) bottom right,
    linear-gradient(45deg,  transparent 10px, #c00 0) bottom left;
  background-size: 50% 50%;
  background-repeat: no-repeat;

  &.round {
    background-image:
      radial-gradient(circle at 0 0, rgba(204,0,0,0) 14px, #c00 15px),
      radial-gradient(circle at 100% 0, rgba(204,0,0,0) 14px, #c00 15px),
      radial-gradient(circle at 100% 100%, rgba(204,0,0,0) 14px, #c00 15px),
      radial-gradient(circle at 0 100%, rgba(204,0,0,0) 14px, #c00 15px);
  }