Leaderboard

я про это говорил https://jsfiddle.net/48t9vk7j/ если вам не нравится что когда выпадающий список раскрывается, то он отталкивает все что ниже него, то тут может помочь position:absolute для списков вообще вам можно было бы сделать свой простой список, на вроде https://jsfiddle.net/negt2p6c/

посмотрите в сторону https://webformyself.com/maski-css/ может поможет, а вообще картинкой проще всего конечно

Мое извращение: Нужные размеры можно либо подобрать, либо использовать JS для автоматизации. Но, имхо, лучше с SVG разобраться, так как в моем примере не получится залить полупрозрачным фоном See the Pen pmqBMv by Alexandr (@AlexZaw) on CodePen. <div class="wrap"> <ul> <li> <div class="el">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam, cumque? lorem lorem lorem lorem lorem lorem</div><span></span> </li> <li> <div class="el">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam, cumque? lorem lorem lorem</div> <span></span></li> </ul> </div> *, :before, :after{ margin: 0; padding: 0; box-sizing: border-box; } .wrap{ background: url(http://placekitten.com/1000); } ul{ margin: 50px; list-style: none; display: inline-block; } li{ margin-bottom: 30px; position: relative; } .el{ position: relative; padding: 10px; } .el:before,.el:after, li:before,li:after,span:before,span:after{ content: ''; position: absolute; height: 100%; width: calc(50% - 40px); top: 0; border: 2px solid #ccc; } .el:before{ border-radius: 50px 0 0 50px; border-right: none; left: 0; } .el:after{ right: 0; border-left: none; border-radius: 0 50px 50px 0; } li:before,li:after,span:before,span:after{ width: 50px; top: calc(-100% + 2px); left: 50%; transform: translateX(calc(-100% + 2px)); border: 2px solid #ccc; border-radius: 0 0 50% 0; border-top: none; border-right: none; border-left: none; } li:after{ transform: scaleX(-1); } span{ position: absolute; height: 100%; width: 100%; top: 0; left: 0; } span:before{ top: calc(100% - 2px); transform: translateX(calc(-100% + 2px)) scaleY(-1); } span:after{ top: calc(100% - 2px); transform: scale(-1,-1); }