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>
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 am trying to make basic CSS challenges. In this case I have an image that I have given a circle, but I do not know what to do so that it retains its aspect ratio, does not fully cover the entire circle and is centered. This is the code I have. I want to learn a way to achieve this effect with any image of any resolution.
Desired effect:
img{
border-radius:50%;
width:300px;
height:300px;
border: solid 1px black;
}
.image_container{
display:flex;
justify-content:center;
align-items:center;
}
<div class="image_container">
<img src="https://danikalaw.com/wp-content/uploads/2017/08/r.png">
</div>
Set the sizing condition on the container rather than the image.
img{
width: 100%;
height: auto;
}
.image_container{
display: flex;
justify-content: center;
align-items: center;
width: 300px;
height: 300px;
border: 1px solid black;
border-radius: 50%;
overflow: hidden;
padding: 30px;
}
<div class="image_container">
<img src="https://danikalaw.com/wp-content/uploads/2017/08/r.png">
</div>
You are using CSS on img that should be on .image-container. Then, you can set width for image enough to be centered and not override the circle, like this:
.image_container {
width:300px;
height:300px;
border-radius:50%;
border: solid 1px black;
display:flex;
justify-content:center;
align-items:center;
}
img {
width: 70%;
}
Maybe something like that?
* {
box-sizing: border-box;
}
img {
padding: 30px;
position: absolute; top: 50%; left: 0;
transform: translateY(-50%);
width: 100%;
}
.image_container {
border-radius: 50%;
border: solid 1px black;
overflow: hidden;
position: relative;
width: 300px; height: 300px;
}
<div class="image_container">
<img src="https://danikalaw.com/wp-content/uploads/2017/08/r.png">
</div>
Outline
Wrap <img> tag in a block level tag and then wrap that tag with another block level tag:
<section class="frame">
<figure class="logo">
<img class="image">
...
Assign the top ancestor tag (demo. section.frame)
position: relative;
width: 50vw;
height: 50vw;
Basic CSS positioning -- parent is relative -- child is absolute -- child references its relative parent's area for X, Y position. The value: 50vw is equivalent to 50% of viewport width. This makes the tag responsive and it will dynamically change it's dimensions and maintain aspect ratio whenever the viewport width changes.
Assign the parent tag of <img> tag (demo. figure.logo)
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
This positions it to the edges of section.frame.
Assign the <img> the following:
display: block;
width: 100%;
height: 100%;
object-fit: contain;
This will position img.image to the edges of figure.logo
Added a :hover effect to show how the img tag fits within the figure and section tags. Each tag is assigned border-radius: 50% so that there are no square corners overlapping the visible border on section.frame.
.frame {
position: relative;
width: 50vw;
height: 50vw;
border: 3px solid #B9BBC0;
border-radius: 50%;
}
.logo {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
border-radius: 50%;
}
.image {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
border-radius: 50%;
}
.frame:hover {
background-color: #000;
}
<section class='frame'>
<figure class='logo'>
<img class='image' src='https://danikalaw.com/wp-content/uploads/2017/08/r.png'>
</figure>
</section>
References
Viewport CCS Concepts
object-fit: contain property
position property
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.
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
I'm trying to create a wrapper with in it 4 divs next to each other (two next to each other and below them the remaining two). However the problem is, is that only the fourth one is showing itself. I've tried setting the overflow: hidden, toy with the display property and also tried to use float:left and float:right. Yet so far no luck.
This is the css I'm using:
html, body{
width: 100%;
height: 100%;
}
#wrapper{
width: 60%;
height: 60%;
top: 20%;
left: 20%;
position: relative;
overflow: hidden;
border: 1px solid #000;
}
#one{
background-color: red;
width: 50%;
position: absolute;
height: 50%;
}
#two{
background-color: green;
width: 50%;
position: absolute;
height: 50%;
}
#three{
background-color:blue;
width: 50%;
position: absolute;
height: 50%;
}
#four{
background-color: yellow;
width: 50%;
position: absolute;
height: 50%;
}
and this is the html code that goes with it:
<html><head>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head><body>
<div id="wrapper">
<div id="one">a</div>
<div id="two">b</div>
<div id="three">c</div>
<div id="four">d</div>
</div>
</body></html>
Can anyone figure out why the yellow (four) div is the only one showing itself, even if I let it float right and others left? (Besides I'm also wondering why there are scrollbars appearing because of the width: 100% and height: 100% in the html,body part.)
Float your inner elements. See here:
http://jsfiddle.net/dkGBA/1/
Main changes:
.child
{
width: 50%;
height: 50%;
float: left;
}
<div id="one" class="child">a</div>
<div id="two" class="child">b</div>
<div id="three" class="child">c</div>
<div id="four" class="child">d</div>
That's because you set the position to absolute on all four of your divs. You then have to position them using top, bottom, right, or left. When you position an element absolutely, it gets taken out of the flow of the document.
jsFiddle example
CSS
#one{
background-color: red;
width: 50%;
position: absolute;
height: 50%;
}
#two{
background-color: green;
width: 50%;
position: absolute;
height: 50%;
right:0;
top:0;
}
#three{
background-color:blue;
width: 50%;
position: absolute;
height: 50%;
left:0;
bottom:0;
}
#four{
background-color: yellow;
width: 50%;
bottom:0;
right:0%;
position: absolute;
height: 50%;
}
A second option is to remove the absolute positioning, and float them all left.
jsFiddle example
CSS:
#one,#two,#three,#four {
float:left;
}
Don't use position for this, but instead use floats.
Example:
http://jsbin.com/ucofed/edit