Я хочу скрыть верхнюю часть прямоугольника внутри изображения svg. Как это можно сделать? Я пытался использовать абсолют, я не получаю ожидаемый результат. Я сделал два изображения SVG абсолютными. Теперь я хочу скрыть верхнюю часть прямоугольника внутри изображения SVG круга.
Ожидаемый результат должен быть таким:
Я получаю так:
HTML Код:
<div class="customer">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-3">
<div class="types">
<div class="term">
<h3>Term Insurance</h3>
</div>
<img src="abc.svg" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS Code:
.customer {
height: 200px;
padding: 30px 0;
}
.types {
margin-left: 100px;
}
.types img {
position: absolute;
top: 113px;
left: 218px;
}
.types::before {
display: block;
content: '';
background: url('dotted.svg');
background-repeat: no-repeat;
height: 250px;
width: 260px;
overflow: hidden;
}
.types::after {
content: '';
width: 250px;
height: 478px;
border-radius: 17px;
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
background-color: #ffffff;
position: absolute;
}
.term {
width: 259px;
height: 102px;
position: absolute;
}
.term h3 {
font-size: 36px;
line-height: 1;
position: absolute;
top: -232px;
left: 45px;
}