ARTICLE AD BOX
I am facing an issue where an SVG icon is getting clipped from the top when it is displayed inside a circular container.
I tried centering with flexbox, adjusting margins, and changing overflow settings, but the problem still persists. The icon is centered correctly, but a small portion of the SVG is still cut off from the top.
Here is the relevant HTML and CSS:
.sec-fi-card-img {
margin-left: auto;
width: 124px;
height: 126px;
position: relative;
}
.sec-fi-card-img img {
width: 124px;
height: 126px;
background-repeat: no-repeat;
background-size: cover;
display: block;
border-top-left-radius: 100%;
border-bottom-right-radius: 15%;
}
.sec-fi-card-min {
width: 88px;
height: 88px;
border-radius: 50%;
position: absolute;
top: 0px;
background-color: #ffffff;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
overflow: visible;
}
.sec-fi-card-min img {
width: 40px;
height: 40px;
display: block;
transform: scale(0.85);
}
<div class="sec-fi-card-img">
<img src="pexels-pixabay-53594.jpg" alt="" style="background: green" />
<div class="sec-fi-card-min">
<img src="https://i.sstatic.net/CE5lz.png" alt="" />
</div>
</div>
