Say I have the following CSS circle but want to change the width & height to 320px each. How would I properly scale -moz-border-radius, -webkit-border-radius, border-radius ?
Seems like if I just make all the border-radii 320px the circle shape is maintained but not sure if this is the correct method.
#circle {
width: 100px;
height: 100px;
background: red;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}
If you have a square of any width/height, simply set border-radius: 50%; This should then give a circle no matter how the element is scaled.
#circle1 {
border-radius: 50%;
width: 100px;
height: 100px;
background-color: #E74C3C;
}
#circle2 {
border-radius: 50%;
width: 200px;
height: 200px;
background-color: #F1C40F;
position: absolute;
left: 125px;
}
#circle3 {
border-radius: 50%;
width: 300px;
height: 300px;
background-color: #2ECC71;
position: absolute;
left: 225px;
}
<div id="circle1" />
<div id="circle2" />
<div id="circle3" />
Related
I have 2 DIVs, that I want to center and overlap. The smaller one is to lay on top of the bigger one.
It works great at full-screen, but if I decrease the browser size, the top/smaller one moves to the left.
<div style="position: relative; top: 160px; border: thin solid gray; border-radius: 10px; width: 300px; height: 64px; margin-left: auto; margin-right: auto; z-index: 1; background: url(...); background-repeat:no-repeat; background-position:top; background-color: #4b2f84"> </div>
<div style="position: absolute; top: 200px; left: 15%; width: 70%; background: white; border: thin solid gray; border-radius: 10px; height: 500px; padding: 50px 30px; margin: auto">something
</div>
I like to use left: 50%; combined with transform: translateX(-50%); when trying to center and overlap content.
The content is offset 50% to the left, and then -50% of its width to the left.. or (this.left == parent.x + parent.width* 0.5 - this.width*0.5)
#div1 {
position: relative;
top: 160px;
border: thin solid gray;
border-radius: 10px;
width: 300px;
height: 64px;
margin-left: auto;
margin-right: auto;
z-index: 1;
background: url(...);
background-repeat: no-repeat;
background-position: top;
background-color: #4b2f84
}
#div2 {
position: absolute;
top: 200px;
left: 50%;
transform: translateX(-50%);
width: 70%;
background: white;
border: thin solid gray;
border-radius: 10px;
height: 500px;
padding: 50px 30px;
margin: auto
}
<div id="div1"> </div>
<div id="div2">something</div>
I have used bellow css for image.
.single_comitment img {
background: #eee none repeat scroll 0 0;
width: 200px;
height: 200px;
-webkit-border-radius: 500px;
-moz-border-radius: 500px;
border-radius: 500px;
left: 5%;
padding: 10px;
position: relative;
top: 70px;
}
But image border radius perfectly not working in IE11.
Instead of using background-color and padding, why not use border:
.single_comitment img {
border: 10px solid #eee;
width: 200px;
height: 200px;
-webkit-border-radius: 500px;
-moz-border-radius: 500px;
border-radius: 500px;
left: 5%;
position: relative;
top: 70px;
overflow:hidden
}
<div class="single_comitment">
<img src="http://lorempixel.com/800/800/city/1/">
</div>
I am new to coding, and am trying to make the intersecting part of these div's a different color. My initial attempt was to create a third div with a border specification to mimic the shapes, but I cannot make it match perfectly. Below is the markup and styling, describing what I want to be a red square and blue circle overlapping, with the overlap section being purple.
.box {
width: 200px;
height: 200px;
background: red;
position: relative;
top: 40px;
left: -35px;
}
.shape {
width: 250px;
height: 250px;
background: navy;
border-radius: 50%;
position: absolute;
left: 50px;
top: 50px;
}
#top-left {
width: 148px;
height: 147px;
background: purple;
position: absolute;
top: 1px;
left:2px;
border-top-left-radius: 118px;
}
<div class="box">
<div class="shape">
<div id="top-left"></div>
</div>
</div>
Is there an easier way to do this, or a way to make the top-left-border perfectly round?
Add overflow: hidden; to .shape. Position top-left relatively. Done!
.box {
width: 200px;
height: 200px;
background: red;
position: relative;
top: 40px;
}
.shape {
width: 250px;
height: 250px;
background: navy;
border-radius: 50%;
position: absolute;
left: 75px;
top: 50px;
overflow: hidden;
}
#top-left {
width: 150px;
height: 150px;
background: purple;
position: relative;
left: -25px;
}
<div class="box">
<div class="shape">
<div id="top-left"></div>
</div>
</div>
Output :
I know how to use border-(bottom|top)-(left|right)-radius: XX;
is there any way to create a curve that changes direction halfway through?
What about overlaying one <div> on top of another like this:
<div class="outer">
<div class="inner-bottom"></div>
<div class="inner-top"></div>
</div>
CSS:
div.outer {
position: relative;
}
div.inner-top {
position: absolute;
width: 200px;
height: 100px;
background-color: #ABC;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
}
div.inner-bottom {
position: absolute;
width: 200px;
height: 80px;
top: 10px;
background-color: #ABC;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
Fiddle
I'm trying to draw this particular shape :
It has to have two straight faces, and I can't manage to create a better shape, other than a semicircle. Is it possible to somehow substract these portions from a circle with CSS, or should I just extract the image from the .psd file as it is ?
Do it with css after property like so:
#circle {
width: 100px;
height: 100px;
}
#circle:after {
width: 100px;
height: 100px;
background: red;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
display: block;
content: '';
position: absolute;
top: -5px;
left: -5px;
}
And in html:
<div id="circle"></div>
I have taken Tom answer and added overflow: hidden to the div.
This way, you don't need to set the div on the border of the body
CSS
#circle {
position: relative;
left: 40px;
top: 40px;
width: 100px;
height: 100px;
overflow: hidden;
}
#circle:after {
width: 100px;
height: 100px;
background: red;
border-radius: 50%;
display: block;
content: '';
position: absolute;
top: -20px;
left: -5px;
}
fiddle
HTML
<div id="circle"> </div>
CSS
#circle {
width: 100px;
height: 100px;
background: red;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}
Output:
Working Fiddle
Updated CSS
#circle {
width: 400px;
height: 400px;
background: red;
-webkit-border-top-left-radius: 80px;
-webkit-border-top-right-radius: 100px;
-webkit-border-bottom-right-radius: 200px;
-webkit-border-bottom-left-radius: 200px;
}
Check this in Chrome, Updated Fiddle
Output: