Issue
I wanted to add a circle shape in the middle of a rectangle div like this:
Here is the html:
<div class="p-5 mb-3 mainInfo"></div>
And with this CSS:
.mainInfo{
background-color: #fff;
border: .01rem round #e0e1ed;
border-radius: 20px;
color: #585CA1;
}
And this is how the rectangle div looks like:
So how can I add circle in the middle of this div?
Solution
I achieved this by absolute
positioning and ::before
selector.
::before height and background color is same as .mainInfo container which it makes the circle shadow hidden inside the container.
HTML:
<div class="mainInfo">
<div class="circle">
</div>
</div>
CSS:
.mainInfo{
background-color: #fff;
border: .01rem round #e0e1ed;
border-radius: 20px;
color: #585CA1;
width:100%;
height:5em;
box-shadow: 0px 0px 17px -5px rgba(0,0,0,0.75);
margin-top: 3em;
display: flex;
align-items: center;
justify-content: center;
}
.circle {
position: relative;
width: 8em;
height: 8em;
background: #fff;
border-radius: 50%;
box-shadow: 0px 0px 17px -5px rgba(0,0,0,0.65);
}
.circle:before{
position: absolute;
content: "";
width: 15em;
height: 5em;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #fff;
z-index: 100;
}
Answered By - Amirhossein Rahmati
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.