So I found this question: Can I create a div with a Curved bottom?
Thanks to it I managed to make a curved bottom of an image, using code below:
border-radius: 0 0 50% 50% / 15%;
overflow: hidden;
It looks like that:
(practically). Everything would be nice but... I need the curve to be totally opposite way:
How can I do that with clean CSS?
Try this:
div {
height: 250px;
width: 300px;
background: tomato;
position: relative;
margin:0 auto;
}
div:after {
content: "";
height: 50%;
width: 100%;
position: absolute;
background: white;
border-radius: 50%;
bottom: -25%;
transition: all 0.8s;
}
<div></div>
You can't do it with just one div. Border-radius doesn't work that way. However, you can achieve something like that with multiple elements. Overlay a second div on the first with a curved top, masking part of the upper div. If you like, enclose it all in a container with overflow: hidden; to obscure the bottom part of the overlay div.
<div class="container">
<div class="curved">
</div>
<div class="curved-overlay">
</div>
</div>
<style>
.curved-overlay{
border-radius: 50% 50% 0 0 / 15%;
background-color: white;
width: 100px;
height: 100px;
margin-top: -15%;
}
.curved{
background-color: blue;
width: 100px;
height: 100px;
}
.container{
width: 100px;
height: 100px;
overflow: hidden;
}
</style>
Here's the codepen: http://codepen.io/anon/pen/JKjNPa
Related
I'm triying to position a point inside a circle to practice CSS position, so I declared .circle with position: relative and inside the point with position: absolute. But I get the point positionated in relation to the body.
.circle {
width: 600px;
height: 600px;
border-radius: 50%;
background-color: grey;
position: relative;
}
.point {
position: absolute;
top: 0px;
left: 100px;
background-color: black;
width: 12px;
height: 12px;
border-radius: 50%;
}
<div class="circle">
<div class="point"></div>
</div>
.point IS relative to the .circle and not body
My suspicion is that you think that .circle for browser is circle too but in fact it is rectangle and only presented to you as circle because of border-radius property. It can be seen when you insect this element.
Blue rectangle is your .circle element and .point is positioned relative to it just like you told it to.
Its working right. If you put position: relative in .circle the position, of point will be relative to circle container.
See Modified Example of your code below. I have set point's position (left and top) to 100%, and removed border-radius. See the point is positioned at bottom right corner of square.
<style>
.circle{
width: 600px;
height: 600px;
background-color: grey;
position: relative;
}
.point{
position: absolute;
top:100%;
left:100%;
background-color: black;
width: 12px;
height: 12px;
border-radius:50%;
}
</style>
<div class="circle">
<div class="point"></div>
</div>
Now, see the position of point, when you remove position: relative from .circle
<style>
.circle{
width: 600px;
height: 600px;
background-color: grey;
}
.point{
position: absolute;
top:100%;
left:100%;
background-color: black;
width: 12px;
height: 12px;
border-radius:50%;
}
</style>
<div class="circle">
<div class="point"></div>
</div>
I want to make a div something like the below image in my website in css. I tried to round bottom borders with border-bottom-right-radius: 50%;, but it curves too much.
please help me to make it.
You can try stacking divs, set a container with overflow: hidden and then position 2 divs that are much bigger and have rounded border.
.container{
width: 100%;
height: 300px;
overflow: hidden;
position: relative;
}
.inner, .outer{
position: absolute;
width: 200%;
height: 1000px;
border-radius: 100%;
border: 4px solid black;
left: -50%;
/* only for the inner - will be overwritten in the next section*/
top: -900px;
background-color: white;
z-index: 3;
}
.outer{
top: -750px;
background-color: #3E9AD2;;
z-index: 2;
}
<div class="container">
<div class="inner"></div>
<div class="outer"></div>
</div>
i try to make that in css
http://prntscr.com/l19jl9
but i only sucsses to
http://prntscr.com/l19juk
https://prnt.sc/l19itx
this my code:
.halfCircleLeft{
height:90px;
width:45px;
border-radius: 90px 0 0 90px;
background:green;
}
how i can do that?
You can set overflow: hidden to the container and make the inner div a big circle, it will give you the effect you want.
.cont{
position: relative;
overflow: hidden;
width: 200px;
height: 100px;
background-color: #e5e5e5;
}
.round-back{
top: -100px;
left: 50px;
position: absolute;
border-radius: 50%;
width: 300px;
height: 300px;
background-color: red;
}
<div class="cont">
<div class="round-back"></div>
</div>
This isn't exactly the shape that you have in your image, but it's simple and it's likely close enough:
#box {
border:1px solid #000;
border-radius: 10px 0px 0px 10px / 50% 0% 0% 50%;
width: 200px;
height: 100px;
background-color: #ccc;
}
<div id="box"></div>
The above solution uses elliptical border-radius, which is specified using a slash (/).
Another approach here is much closer to your original image, but it takes significantly more code to implement, and it's quite a bit more brittle too to customise:
#wrapper {
overflow: hidden;
width: 200px;
}
#box::before {
position: relative;
display: block;
content: "";
margin-left: -20px;
background: #ccc;
height: 400px;
width: 400px;
margin-top: -75%;
border-radius: 50%;
z-index: -10;
}
#box {
float: left;
position: relative;
margin-left: 20px;
width: 200px;
height: 100px;
background-color: #ccc;
}
#content {
position: absolute;
height: 100%;
width: 100%;
top: 0px;
}
<div id="wrapper">
<div id="box">
<div id="content">
</div>
</div>
</div>
This approach uses an oversized circle, which is then clipped by a #wrapper div using overflow: hidden;. The #content div isn't strictly necessary for the shape, but it may make it easier to position something inside the box.
Hello! I would like to accomplish this with a circle div. I know how to accomplish positioning with absolute and relative in 1 div, but if i want to make this out of two divs and make the circle overlapping these two divs is there any easy/smart way to go in CSS?
Hope it helps
body {
margin: 0px;
}
.top,
.bottom {
width: 100%;
height: 100px;
}
.top {
background: red;
}
.bottom {
background: black;
}
.circle {
background: green;
height: 100px;
width: 100px;
border-radius: 50%;
position: absolute;
top: 50px;
left: 50vh;
}
<div class="top"></div>
<div class="bottom"></div>
<div class="circle"></div>
I have one div with overflow: scroll and a lot of text. Then second div inside with position: absolute and 100% height and width. Is it possible to do, when you scroll down, inside div also moves down so it always covers whole visible view of outer div, with only css or I'll need to use javascript?
Here's an example in which you can see, that scrolling down, inside div is left at the top.
CSS:
.test1 {
position: relative;
height: 200px;
width: 500px;
overflow: scroll;
background: green;
}
.test2 {
position: absolute;
opacity: 0.5;
height: 100%;
width: 100%;
top: 0;
left: 0;
background: red;
}
HTML:
<div class="test1">
<div class="test2"></div>
Lot of text
</div>
is this what you want? Demo
.test1 {
position: relative;
height: 200px;
width: 500px;
overflow: scroll;
background: green;
}
.test2 {
position: fixed;
opacity: 0.5;
height: 185px;
width: 485px;
background: red;
}