How to add a bottom curve in a div - CSS? - html

Question

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

Answer 1

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>

Answer 2

Try this code change height and border-top-left-radius like
.container {
position: relative;
}
.rect {
width: 334.5px;
height: 130px;
background: #34EFEE;
text-align: center;
line-height: 223px;
}
.rect:after {
content: '';
position: absolute;
bottom: 0px;
width: 334.5px;
height: 70px;
background: #FFFFFF;
left: 0;
border-top-left-radius: 80%;
border-top-right-radius: 100%;
}
<div class="container">
<div class="rect">
<h3>334.5 X 223</h3>
</div>
</div>

Answer 3

try this 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: 360px;
height: 360px;
transform: rotate(45deg);
background-color: #fff;
left: -11px;
bottom: -270px;
border-radius: 30px;
}
<div class="container">
<div class="rect">
<h3>334.5 X 223</h3>
</div>
</div>

Answer 4

May as well through in another answer, this is not one I'd expect you to use but is one that uses clip path.
body {
background: #eee;
}
div {
width: 300px;
height: 150px;
position: relative;
overflow: hidden;
text-align: center;
color: white;
background: #00A2E8;
border-radius: 0 0 5px 5px;
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 96% 99%, 92% 97%, 88% 95%, 84% 93%, 80% 91%, 76% 89%, 72% 87%, 68% 85%, 64% 83%, 60% 81%, 56% 79%, 52% 78%, 50% 78%, 48% 78%, 44% 79%, 40% 81%, 36% 83%, 32% 85%, 28% 87%, 24% 89%, 20% 91%, 16% 93%, 12% 95%, 08% 97%, 04% 99%, 0% 100%);
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 96% 99%, 92% 97%, 88% 95%, 84% 93%, 80% 91%, 76% 89%, 72% 87%, 68% 85%, 64% 83%, 60% 81%, 56% 79%, 52% 78%, 50% 78%, 48% 78%, 44% 79%, 40% 81%, 36% 83%, 32% 85%, 28% 87%, 24% 89%, 20% 91%, 16% 93%, 12% 95%, 08% 97%, 04% 99%, 0% 100%);
}
<div>Lorem ipsum</div>