.container {
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
height: 900px;
width: 33%;
background-image: linear-gradient(to top left, rgba(24, 174, 177, 0.93), #1c9f94 24%, #12ce80 54%, #107a7c 76%, #096668);
box-shadow: 5px 0 10px 0 rgba(120, 150, 150, 0.6);
}
.options-wrapper {
display: flex;
flex-direction: column;
}
.options-item-active,
.options-item-inactive {
position: relative;
display: flex;
align-items: center;
justify-content: center;
padding: 50px 40px 50px 50px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
}
.options-item-active {
background-color: #fff;
box-shadow: inset 6px 0px 10px 1px rgba(120, 150, 150, 0.6);
}
.test {
position: absolute;
display: block;
height: 130%;
width: 30px;
right: -11px;
background-color: transparent;
background: radial-gradient(circle at 0 0, transparent 19px, #fff 20px) top left, radial-gradient(circle at 0 100%, transparent 19px, #fff 20px) bottom left;
background-size: 100% 50%;
background-repeat: no-repeat;
cursor: default;
}
.test::before {
content: '';
display: block;
position: absolute;
height: 19px;
width: 20px;
border-radius: 0 0 20px 0;
box-shadow: 5px 3px 10px 1px rgba(120, 150, 150, 0.6);
background-color: transparent;
}
.test::after {
content: '';
display: block;
position: absolute;
height: 19px;
width: 20px;
border-radius: 0 20px 0 0;
box-shadow: 2px -3px 10px 1px rgba(120, 150, 150, 0.6);
background-color: transparent;
bottom: 0;
}
<div class="container">
<div class="options-wrapper">
<div class="options-item-active">
<span class="options-item-text">Item 1</span>
<span class="test"></span>
</div>
<div class="options-item-inactive">
<span class="options-item-text">Item 2</span>
</div>
<div>
</div>
вот примерчик, нужно сделать скругления, там все видно, что требуется. Проблема, в таком решении, с тенями(именно на скруглениях), кто поможет и знает как сделать, подскажите