Радиус границы сложной формы

Question

Я пытаюсь получить следующую форму как css. Кто-нибудь поможет мне получить какой-либо учебник или фрагмент кода о том, как иметь этот король формы как css?

Answer 1

Вам потребуется несколько дополнительных элементов создать два рюшечки на левой и правой.

Примечание: это работает только на твердом фоне (в данном случае белый фон используется на .ws_left:before и .ws_right:before

body { margin: 5em; } 
 
.ws { 
 
    position: relative; 
 
    width: 15em; 
 
    height: 15em; 
 
    background: gray; 
 
    border-radius: 0 0 1em 1em; 
 
} 
 
.ws_left { 
 
    position: absolute; 
 
    top: 0; 
 
    left: -4em; 
 
    right: 100%; 
 
    height: 2.5em; 
 
    background: gray; 
 
    border-radius: 1em 0 0 1em; 
 
} 
 
    .ws_left:before, .ws_left:after, 
 
    .ws_right:before, .ws_right:after { 
 
    content: ''; 
 
    position: absolute; 
 
    background: red; 
 
    width: 1em; 
 
    height: 1em; 
 
    top: 100%; 
 
    right: 0; 
 
    z-index: 1; 
 
    } 
 
    .ws_left:before { 
 
    border-top-right-radius: 1em; 
 
    background: white; 
 
    z-index: 2; 
 
    } 
 
    .ws_left:after { 
 
    background: gray; 
 
    } 
 

 
    .ws_right:before, .ws_right:after { 
 
    right: auto; 
 
    left: 0; 
 
    } 
 
    .ws_right:before { 
 
    border-top-left-radius: 1em; 
 
    background: white; 
 
    z-index: 2; 
 
    } 
 
    .ws_right:after { 
 
    background: gray; 
 
    } 
 
.ws_right { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 100%; 
 
    right: -2em; 
 
    height: 2.5em; 
 
    background: gray; 
 
    border-radius: 0 1em 1em 0; 
 
}

<div class="ws"> 
 
    <div class="ws_left"></div> 
 
    <div class="ws_right"></div> 
 
</div>

Answer 2

Я надеюсь, что это будет услужливо для Вас: -

.maindiv{ background:#4C4B4B; width:400px; height:330px; border-radius:12px; position:relative; margin:auto;} 
 
.maindiv::after { 
 
    background: #4c4b4b none repeat scroll 0 0; 
 
    border-radius: 25px 0 0 25px; 
 
    content: ""; 
 
    display: inline-block; 
 
    height: 50px; 
 
    left: -90px; 
 
    position: absolute; 
 
    width: 100px; 
 
} 
 
.maindiv::before { 
 
    background: #4c4b4b none repeat scroll 0 0; 
 
    border-radius: 0 25px 25px 0; 
 
    content: ""; 
 
    display: inline-block; 
 
    height: 50px; 
 
    right: -90px; 
 
    position: absolute; 
 
    width: 100px; 
 
} 
 
#simulated { 
 
    left: -30px; 
 
    position: absolute; 
 
    top: 29px; 
 
    transform: rotate(-90deg); 
 
    z-index: 9999; 
 
} 
 
#simulated2 { 
 
    right: -30px; 
 
    position: absolute; 
 
    top: 29px; 
 
    transform: rotate(161deg); 
 
    z-index: 9999; 
 
} 
 
#simulated path, #simulated2 path { 
 
    fill:#4c4b4b; 
 
}

<div class="maindiv"> 
 
<svg width="60" height="60" id="simulated"> 
 
\t <path d="M 40 0 h 320 a 40 30 0 0 0 40 30 v 240 a 40 30 0 0 0 -40 30 h -320 a 40 30 0 0 0 -40 -30 v -240 a 40 30 0 0 0 40 -30 Z"/> 
 
</svg> 
 
<svg width="60" height="60" id="simulated2"> 
 
\t <path d="M 40 0 h 320 a 40 30 0 0 0 40 30 v 240 a 40 30 0 0 0 -40 30 h -320 a 40 30 0 0 0 -40 -30 v -240 a 40 30 0 0 0 40 -30 Z"/> 
 
</svg> 
 
</div>