Собрал некую конструкцию, что то близкое, но с бордер-радиус не выходит правильно изогнуть,
как то не очень сильно погружён в тонкости этого свойства, чтоб по наитию сделать.
Может кто сможет дать более близкие значения радиусов, чтоб изогнуть углы ближе к первому скриншоту.
Код напишу чуть далее, а сейчас скрин того, что получилось
Добавлено через 01:37 сек.
Использовал такую конструкцию :
HTML
<div class="header">
<div class="hline1"></div>
<div class="hline2"></div>
<div class="hline3"></div>
</div>
CSS
.hline1 {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 10px;
border: none;
-webkit-border-radius: 4px;
border-radius: 4px;
color: black;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
background: rgba(52, 152, 219, 0.5);
}
.hline2 {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
width: 90%;
height: 17px;
position: absolute;
right: 5%;
left: 5%;
margin: 0 auto;
border: none;
-webkit-border-radius: 0 0 34px 34px / 0 0 31px 31px;
border-radius: 0 0 34px 34px / 0 0 31px 31px;
font: normal 16px/1 "Times New Roman", Times, serif;
color: black;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
background: rgba(52, 152, 219, 0.5);
background-position: 50% 50%;
-webkit-background-origin: padding-box;
background-origin: padding-box;
-webkit-background-clip: border-box;
background-clip: border-box;
-webkit-background-size: auto auto;
background-size: auto auto;
}
.hline3 {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
width: 88%;
height: 50px;
position: absolute;
right: 6%;
left: 6%;
margin: 17px auto 0;
border: none;
-webkit-border-radius: 0 0 66px 66px / 0 0 75px 75px;
border-radius: 0 0 66px 66px / 0 0 75px 75px;
font: normal 16px/1 "Times New Roman", Times, serif;
color: black;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
background: rgba(52, 152, 219, 0.5);
}
