Как сделать фигуру с 4 скошенными краями

Question

Я пытаюсь сделать фигуру с четырьмя отрицательно изогнутыми углами, и я пробовал радиальные градиенты. Однако применяется только один из углов, и я не могу понять, почему. https://jsfiddle.net/xiej/1Lqysaho/1/

#shape2 { 
    width: 120px; 
    height: 120px; 
    position: absolute; 
    top: 400px; 
    right: 400px; 
    background-image: 
    radial-gradient(circle at 0px 0px, #FFF 0px, #FFF 60px, #F00 60px), 
    radial-gradient(circle at 0px 120px, #FFF 0px, #FFF 60px, #F00 60px), 
    radial-gradient(circle at 120px 0px, #FFF 0px, #FFF 60px, #F00 60px), 
    radial-gradient(circle at 120px 120px, #FFF 0px, #FFF 60px, #F00 60px); 
} 

Answer 1

Последний цвет остановки каждого радиального градиента покрывает остальную часть площади, думать о них наслоения друг на друга. Я не уверен, что мое исправление - лучший способ получить форму, которую вы ищете, но я думаю, что это сделает форму хотя бы! Я укоротил остановки, чтобы закончить радиальный градиент, прежде чем он покроет любой из трех других углов.

https://jsfiddle.net/1Lqysaho/2/

background: #F00; 
background-image: 
    radial-gradient(circle at 0px 0px, #FFF 60px, #f00 1px, transparent 1px), 
    radial-gradient(circle at 0px 120px, #FFF 60px,#f00 1px, transparent 1px), 
    radial-gradient(circle at 120px 0px, #FFF 60px,#f00 1px, transparent 1px), 
    radial-gradient(circle at 120px 120px, #FFF 60px,#f00 1px, transparent 1px); 

Answer 2

---

div.round { 
background: 
-webkit-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px), 
-webkit-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px), 
-webkit-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px), 
-webkit-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px); 
} 
div, div.round { 
background-position: bottom left, bottom right, top right, top left; c 
-moz-background-size: 50% 50%; 
-webkit-background-size: 50% 50%; 
background-repeat: no-repeat; 
} 
div { 
width: 130px; 
height:100px; 
margin:15px auto; 
padding:13px 15px; 
} 

---

<div class="round"></div>