Я пытаюсь составить список абзацев, и один из них должен быть выбран, как и изображение ниже, но кажется, что я просто не могу добиться успеха.
Я пробовал что-то в: http://jsfiddle.net/bmj2j2wd/, но конец просто не кривит так, как мне хотелось бы... т.е. наружу, а не внутрь.
Это css оттуда:
.active{
border:2px solid dodgerblue;
border-bottom:0;
width:80px;
height:32px;
margin:10px;
position:relative;
border-radius:16px 16px 0 0;
}
.active:after,
.active:before{
content:'';
width:80px;
height:32px;
border:2px solid dodgerblue;
position:absolute;
bottom:-8px;
border-top:0;
}
.active:after{
border-left:0;
border-radius:0 0 16px 0;
down:-16px;
}
.active:before{
border-right:0;
border-radius:0 0 0 16px;
up:-16px;
}
но это выглядит совершенно не так.
Очень важно было бы, чтобы две прямые линии после кривизны проходили весь путь вверх и вниз до верхней и нижней части страницы.
Итак, я хотел бы попросить о помощи у сообщества, чтобы эта работа работала.