У меня есть небольшая проблема с созданием двух горизонтальных фонов в одном div с радиусом границы. Я хочу, чтобы главный div был кругом.
Мой код
body{
text-align: center;
}
.split-outer {
position: relative;
display: inline-block;
width: 200px;
height: 200px;
z-index: 2;
background: #014495;
border-radius: 100%;
}
.split-outer::after{
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 50%;
z-index: -1;
background: #fff;
border-bottom-right-radius: 200px;
border-bottom-left-radius: 200px;
}
.split-inner{
width: 200px;
height: 200px;
margin: 0 auto;
color: #fff;
text-align: center;
}
span{
display: block;
}
span.split-title{
padding: 30px 0 10px 0;
font-size: 55px;
text-align: center;
line-height: 55px;
}
span.split-content{
padding: 20px 0;
font-size:18px;
color: #014495;
}<div class="container-fliud">
<div class="jumbotron">
<div class="split-outer">
<div class="split-inner">
<span class="split-title">100</span>
<span class="split-content">Lorem ipsum</span>
<button type="button" class="btn btn-primary btn-sm">Button</button>
</div>
</div>
</div>
</div> Но у меня есть небольшая ошибка, в элементе after я вижу синюю фоновую линию из первого div. Это выглядит как линия границы, созданная из радиуса. Но я хочу чистый белый круглый фон.
Предыдущая версия Codepen:https://codepen.io/michal_t/pen/KdoZYz/
