Ara sıra köşeleri birleştirmek için kullandığım before ve after ile radius vererek içe kıvrılmasını sağlıyorum.Başka aklıma yöntem gelmemişti.
<div class="menu"></div>
<div class="sidebar">
<div class="sol-kose"></div>
<div class="sag-kose"></div>
</div>
.menu {
width:100%;
float:left;
background:#000;
height:40px;
}
.sidebar {
position:relative;
width:200px;
background:#000;
height:200px;
left:20%;
float:left;
}
.sol-kose {
position:absolute;
left:0;
top:0;
width:25px;
height:25px;
}
.sol-kose:before {
content: '';
width: 100%;
height: 100%;
position: absolute;
left: -25px;
top: 0;
background-color: #000;
z-index: -25;
}
.sol-kose:after {
content: '';
width: 100%;
height: 100%;
position: absolute;
left: -25px;
top: 0;
border-top-right-radius: 50px;
background:#fff;
z-index: -24;
}
.sag-kose {
position:absolute;
right:0;
top:0;
width:25px;
height:25px;
}
.sag-kose:before {
content: '';
width: 100%;
height: 100%;
position: absolute;
right: -25px;
top: 0;
background-color: #000;
z-index: -25;
}
.sag-kose:after {
content: '';
width: 100%;
height: 100%;
position: absolute;
right: -25px;
top: 0;
border-top-left-radius: 50px;
background:#fff;
z-index: -24;
}