Перевернутая четверть круга по углам div [дубликат] ⇐ CSS

[Anonymous]

Как создать четверть круга div, ниже показана форма цели
Четверть круга в углу div
(Для публикации изображений требуется 10 репутации)< /em>
Как мы видим, в каждом углу есть четверть круга, и он прозрачный
Четверть круга в каждом углу(Для публикации нужно 10 репутации images)
Что я знаю, невозможно использовать свойства border-radius, поскольку целью border-radius является создание округлой формы в элементе div. Итак, я пытаюсь использовать 4 дополнительных div и разместить их в углу родительского div. Нажмите здесь. Вы можете увидеть, что я сделал здесь, или увидеть код ниже,
HTML

Код: Выделить всё

JS Bin

CSS

Код: Выделить всё

.container {
position: relative;
width: 300px;
height: 300px;
background: red;
}

.corner-shape {
position: absolute;
width: 40px;
height: 40px;
background: #222;

}

.top-left {
left: 0;
border-bottom-right-radius: 100%;
}

.top-right {
right: 0;
border-bottom-left-radius: 100%;
}

.bottom-right {
bottom: 0;
border-top-right-radius: 100%;
}

.bottom-left {
bottom: 0;
right: 0;
border-top-left-radius: 100%;
}

Но все еще есть проблема: я не могу сделать их прозрачными. У меня нет идей.


Подробнее здесь: https://stackoverflow.com/questions/793 ... ers-of-div