Reputation: 491
I have a problem when creating a div above the circle as shown below!
I have set up like this
CSS:
.count-select {
box-shadow: 0 -5px 10px -5px rgba(0,0,0,.8);
border-top: 2px solid #E75532;
height: auto;
width: 100%;
background: #fff;
position: fixed;
bottom: 0;
padding: 12px;
border-radius: 50%/100px 100px 0 0;
}
As a result, it is not like the design, expect people to help.
Thank you!
Upvotes: 2
Views: 969
Reputation: 274384
You can make the element to overflow by adding negative values to left/right. then add some padding to avoid content overflow like this :
.container {
width: 200px;
border: 1px solid blue;
height: 200px;
margin: 0 auto;
overflow: hidden;
position: relative;
}
.count-select {
box-shadow: 0 -5px 10px -5px rgba(0, 0, 0, .8);
border-top: 2px solid #E75532;
height: 50px;
background: #fff;
position: absolute;
bottom: 0;
left: -30px;
right: -30px;
padding: 12px 30px;
border-radius: 50%;
text-align:center;
}
<div class="container">
<div class="count-select ">
select items
</div>
</div>
Upvotes: 2
Reputation: 1209
If you divide it into two divs instead of one, you can control to how far the border radius should go. See example below.
body {
background: lightgoldenrodyellow;
}
.top {
background: white;
border-top: 2px solid red;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
height: 100px;
width: 400px;
text-align: center;
box-shadow: 0px -3px 10px rgba(0,0,0,0.3);
}
.middle {
background: white;
width: 400px;
height: 100px;
text-align: center;
margin: 0;
}
<div class="container">
<div class="top">
<p>Select items and swipe up</p>
</div>
<div class="middle">
0 items selected
</div>
</div>
Upvotes: 0