Как сделать впуклый угол средствами css?

Question

[mkrichet]

Доброе время суток!

Как можно сделать такой угол(чтобы сохранить серую рамку, цвет фона и элемента)?



Можно за основу использовать треугольник, но в нем не наше как согнуть внутри.

width: 7em;
height: 7em;
filter: drop-shadow(0 0 5px #000);
background: linear-gradient(to left top, transparent 50%, red 50%);

Если использовать наложения другого объекта для формования прогиба, пропадет возможность задать рамку.

Comments

[Lynn «Кофеман»]

Не знаю как другие, но я по этой картинке не могу ничего понять. Добавьте побольше контекста

Answer 1

[MiPony]

Есть два варианта. Первый через border и border-radius. https://codepen.io/jcblw/pen/DxAJF
Второй более правильный через svg. Найти в интернете или сделать свою svg и через код применить в своем проекте.

<svg id="svg-after" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17.54 22.11"><defs></defs><g id="Group-bg-bord"><path id="bg-after" class="cls-1" d="M0,.15s4.41.5,6.58,4.08,6.61,14.21,6.76,14.5A8.43,8.43,0,0,0,17.25,22H0Z"/><path id="border-line" class="cls-2" d="M0,.15s4.41.5,6.58,4.08,6.61,14.21,6.76,14.5A8.43,8.43,0,0,0,17.25,22"/></g></svg>

Его можно будет редактировать с помощью css, цвет, ширину линии, цвет фона и т.д.

.cls-1{fill:#f1f1f1;}
 .cls-2{fill:none;stroke:#ddd;stroke-miterlimit:10;stroke-width:0.5px;}