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
Related Topics
How to Make a Series of <P> Elements Display Horizontally
How to Make The Native 'Browse' Button on a File Input Larger Cross Browser
Django 1.8 Static Files Doesnt Work
Firefox Not Displaying Properly: Before and: After Pseudo-Elements
Display: Table-Cell Problems in Chrome
CSS3 Selector Last Element That Is Not of Class X
Are There a CSS Property That Would Change Nothing and Where We Can Store Information
How to Do an Inset Border with a Border Radius on an Image
CSS Animation Keyframes with Display None Works to Fade In, But Not Fade Out
Equal Height Columns and Vertical Align Image in Column
Why Do H1 Tags Not Need a Class or Id in The CSS
Viewport-Unit Font-Size and Zooming Bug: Which Browsers Are Affected
Page Scroll Under Position: Fixed Content
Ie11 Blurry Right Hand Edge of Div with Border-Radius
Cannot Find Definitions of Editor-Label and Editor-Field in MVC 4, Did Ms Remove It? Why