Following is my code in which I am unable to create a bottom curve but increasing the border-top-left-radius/border-top-right-radius is not able to create a bump as shown in fig. Let me know how can I handle this using CSS only.
Code:
.container {
position: relative;
}
.rect {
width: 334.5px;
height: 223px;
background: #34EFEE;
text-align: center;
line-height: 223px;
}
.rect:after {
content: '';
position: absolute;
bottom: 0px;
width: 334.5px;
height: 15px;
background: #FFFFFF;
left: 0;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
}
<div class="container">
<div class="rect">
<h3>334.5 X 223</h3>
</div>
</div>
Expected Output -
PLNKR -- http://plnkr.co/edit/7oTCHyn8PFABri0KHSrH?p=preview
You can use :after
pseudo element to create shape and add large box-shadow
for blue background.
div {
width: 300px;
height: 150px;
position: relative;
overflow: hidden;
text-align: center;
color: white;
}
div:after {
content: '';
box-sizing: border-box;
position: absolute;
bottom: 0;
left: 50%;
height: 100px;
width: 120%;
border: 5px solid black;
transform: translate(-50%, 50%);
box-shadow: 0px 0px 0px 200px #00A2E8;
border-radius: 50%;
z-index: -1;
}
<div>Lorem ipsum</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With