Rounded Bottom Div Where Curve Angle Is Not Responsive

Rounded bottom div where curve angle is not responsive

You can try like below. A circle with a big radius (as big as you want) and you offset the center to keep the curve at the bottom:

* {  font-size: 1.125rem;  margin: 0;   padding: 0; }
#hero { background: #007DDC; clip-path: circle(4000px at 50% calc(100% - 4000px)); padding: 3rem 1.25rem 5rem;}
.wrap { max-width: 100%; width: 80rem; margin:auto;}
<div id="hero">  <div class="wrap">    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse erat nisi, molestie eget pharetra ultricies, posuere ac est. Donec libero nulla, volutpat vitae lectus vel, maximus rhoncus felis. Curabitur sollicitudin urna eu luctus blandit. Ut vel tortor elit. Fusce quis aliquet dui. In auctor lorem non magna luctus dictum. Fusce faucibus, ante eget euismod tristique, arcu est rutrum leo, nec laoreet nunc nibh eu urna. Sed condimentum iaculis lorem, in congue arcu fermentum sit amet. Nullam dui eros, porta sed finibus quis, vestibulum nec ipsum.</p>  </div></div>

Can I create a div with a Curved bottom?

CSS:

div{
background-color:black;
width:500px;
height:50px;
border-bottom-left-radius:50%;
border-bottom-right-radius:50%;
}

see is this ok for you

div {
background-color: black;
width: 500px;
height: 50px;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
}
<div>
</div>

Curved end of border-bottom in CSS

This is not possible within default borders, as border-radius controls the radius around the element, not a single border edge.

I would recommend faking it with a pseudo-element:

div {  max-width:50vw;  padding-bottom:25px;  position:relative;}div:after {  content:'';  position:absolute;  bottom:0;  left:0;  right:0;  background:red;  height:20px;  border-radius:0 10px 10px 0;}
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quippe: habes enim a rhetoribus; Quodsi ipsam honestatem undique pertectam atque absolutam. Duo Reges: constructio interrete. Urgent tamen et nihil remittunt.</div>

border-radius not working

To whomever may have this issue. My problem was border-collapse. It was set to:

border-collapse: collapse;

I set it to:

border-collapse: separate; 

and it fixed the issue.

How to make inverted rounded corners and bend content to follow curved container

You should post also complete code, it is not always enough with CSS. (Enlico already commented this to you).

Anyway, a posible solution would be this, moving the elements in a vertical amount to make them rotate:

.container {
width: 100%;
position: relative;
top: 200px;
}

.element {
position: absolute;
background-color: tomato;
left: 50%;
transform: translateY(-400px) rotate(var(--angle)) translateY(400px) rotate(calc(-1 * var(--angle)));
}

.element:nth-child(1) {
--angle: 50deg;
}

.element:nth-child(2) {
--angle: 30deg;
}

.element:nth-child(3) {
--angle: 10deg;
}

.element:nth-child(4) {
--angle: -10deg;
}

.element:nth-child(5) {
--angle: -30deg;
}

.element:nth-child(6) {
--angle: -50deg;
}
<div class="container">
<div class="element">item 1</div>
<div class="element">item 2</div>
<div class="element">item 3</div>
<div class="element">item 4</div>
<div class="element">item 5</div>
<div class="element">item 6</div>
</div>

curved div with transparent top

You can use clip path in both ways (on the top element or the bottom one) and simply make top and bottom to overlay like this :

.first,
.second {
display: inline-block;
margin: 5px;
}

.first .top {
clip-path: circle(72.9% at 50% 27%);
height: 200px;
width: 200px;
background: url(https://picsum.photos/id/10/800/800) center/cover;
position: relative;
}

.first .bottom {
margin-top: -70px;
background: yellow;
height: 100px;
width: 200px;
}

.second .top {
height: 200px;
width: 200px;
background:url(https://picsum.photos/id/10/800/800) center/cover;
position: relative;
}

.second .bottom {
clip-path: polygon(0 25%, 14% 41%, 28% 51%, 49% 54%, 66% 53%, 79% 48%, 89% 39%, 100% 27%, 100% 100%, 47% 100%, 0% 100%);
margin-top: -70px;
background: yellow;
height: 100px;
width: 200px;
}
<div class="first">
<div class="top">
</div>
<div class="bottom">
</div>
</div>

<div class="second">
<div class="top">
</div>
<div class="bottom">
</div>
</div>

Curve on the top/bottom of a div or element

You can use border-radius with different values for the vertical radius and the horizontal radius using the slash syntax:

.picture {  border-radius: 50%/10%;}
<img class="picture" src="https://static-s.aa-cdn.net/img/ios/608437635/d606ff565c22f64d84e4c2195981c386?v=1">

CSS to create curved corner between two elements?

Well, as it turns out, I managed to solve the problem myself. I hacked together a demo -- check it out.

Essentially, several additional DOM elements are required and a fair amount of CSS. And as mentioned in the link provided by @Steve, a solid background is required. I don't believe there is any way to do this over a gradient background or other pattern.

I ended up with HTML like this:

ul.selectable {  padding-top: 1em;  padding-bottom: 1em;  width: 50%;  float: left;}ul.selectable li {  margin: 0 3em 0 4em;  border-radius: 8px;  -webkit-border-radius: 8px;  -khtml-border-radius: 8px;  -moz-border-radius: 8px;}ul.selectable li.active {  margin-right: 0;}ul.selectable li.active dl {  background-color: #4f9ddf;}ul.selectable li dt {  background-color: #dfd24f;  padding: 1em;  margin-left: -2em;  margin-right: -2em;  -webkit-border-radius: 8px;  -khtml-border-radius: 8px;  -moz-border-radius: 8px;  border-radius: 8px;}ul.selectable li dd {  padding: 0.25em;  background-color: #fff;}ul.selectable li.active dt {  background-color: #4f9ddf;  margin-right: 0;  -webkit-border-top-right-radius: 0;  -webkit-border-bottom-right-radius: 0;  -khtml-border-top-right-radius: 0;  -khtml-border-bottom-right-radius: 0;  -moz-border-radius-topright: 0;  -moz-border-radius-bottomright: 0;  border-top-right-radius: 0;  border-bottom-right-radius: 0;}ul.selectable li.active dd.top {  -webkit-border-bottom-right-radius: 8px;  -khtml-border-bottom-right-radius: 8px;  -moz-border-radius-bottomright: 8px;  border-bottom-right-radius: 8px;}ul.selectable li.active dd.bot {  -webkit-border-top-right-radius: 8px;  -khtml-border-top-right-radius: 8px;  -moz-border-radius-topright: 8px;  border-top-right-radius: 8px;}div.right {  float: left;  padding-top: 3em;  width: 50%;}div.content {  height: 15em;  width: 80%;  background-color: #4f9ddf;  padding: 1em;  -webkit-border-radius: 8px;  -khtml-border-radius: 8px;  -moz-border-radius: 8px;  border-radius: 8px;}
<ul class="selectable">  <li>    <dl>      <dd class="top"></dd>      <dt>Title</dt>      <dd class="bot"></dd>    </dl>  </li>  <li class="active">    <dl>      <dd class="top"></dd>      <dt>Title</dt>      <dd class="bot"></dd>    </dl>  </li>  <li>    <dl>      <dd class="top"></dd>      <dt>Title</dt>      <dd class="bot"></dd>    </dl>  </li></ul><div class="right">  <div class="content">This is content</div></div>

Can this angle be the same at any width?

Unfortunately, it's not going to be possible to calculate solely with CSS as you would require trigonometry methods (sin(), cos(), tan()).

UPDATE:

CSS to get support for trigonometry functions

If you need to make the calculation and apply it to a static, non-responsive polygon, Sass is your friend here. Otherwise, JavaScript Math functions is the only answer.

EDIT: Calculation

Assuming you have the following shape, where ABCD is your desired shape (E is included to help with the calculation):

A                                        B
o----------------------------------------o
| |
| |
| |
| |
| o C
| |
| |
o----------------------------------------o
D E

The trick here is to find the length of CE and subtract that from the total height.

If we start by looking at the right-angled triangle CDE. The angle < DCE is actually equal to the angle < ADB (the 86deg you desire). We also know the length of DE - 100%, but lest just take that as a unitless value for now. This gives us enough to calculate the length of CE.

DE = 100
< DCE = 86deg

Using the following trigonometry calculation:

tan(@) = <opposite-length> / <adjacent-length>
tan(@) = DE / CE
// Let's put in what we know
tan(86) = 100 / CE
CE = 100 / tan(86)

Using this, and assuming the height of BE is 100 (or 100%) we can then find the length of BC with the following:

BC = BE - CE
// BE == AD (which you will be able to use programatically)
BC = AD - CE
BC = 100 - CE
BC = 100 - [100 / tan(86)] = 93.0073%
// so your calculation would be:
BC = AD - [AD / tan(86)] * 1%

Therefore, co-ordinate C should be 100%, 93.0073%

ref

Trigonometry helper



Related Topics



Leave a reply



Submit