CSS: нестандартный блок с границей и закругленными углами ⇐ CSS

[Anonymous]

Мне нужно создать блок, подобный этому:
< /p>
Я сделал это, используя дополнительный дочерний блок и четыре псевдо-элемента. Но есть, вероятно, лучшие варианты. Пожалуйста, предложите что -то более элегантное. Следовательно, просто рисование такой формы с использованием SVG не является вариантом. Может, как-то использовать клип-пат или что-то в этом роде? class = "Snippet-Code-CSS Lang-CSS PrettyPrint-override">

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

.wrapper {
width: 320px;
height: 370px;
border: 2px solid red;
border-radius: 10px;
position: relative;
}
.wrapper:before,
.wrapper:after {
content: '';
display: block;
width: 15px;
height: 15px;
background-color: #fff;
position: absolute;
z-index: 2;
}
.wrapper:before {
left: -5px;
top: 160px;
}
.wrapper:after {
left: 95px;
bottom: -5px;
}
.border-block {
background-color: #fff;
position: absolute;
width: 100px;
height: 200px;
border-top: 2px solid red;
border-right: 2px solid red;
border-left: 2px solid white;
border-bottom: 2px solid white;
border-top-right-radius: 10px;
left: -2px;
bottom: -2px;
}
.border-block:before,
.border-block:after {
content: '';
display: block;
width: 15px;
height: 15px;
border-left: 2px solid red;
border-bottom: 2px solid red;
border-bottom-left-radius: 10px;
position: absolute;
z-index: 3;
}
.border-block:before {
top: -17px;
left: -2px;
}
.border-block:after {
bottom: -2px;
left: 100px;
}< /code>

Подробнее здесь: https://stackoverflow.com/questions/794 ... ed-corners