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:
Related
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" />
How to create the curve that you see in picture with CSS and HTML?
Can I use CSS border radius or use other solution?
You could do it with two divs and psuedo elements :before and :after. Working code below
.top-bar{
height: 100px;
width: 100%;
background-color: #55c3ff;
}
.curved-bottom{
width: 80%;
margin: 0 auto;
height: 50px;
background-color: #55c3ff;
border-radius: 0 0 20px 20px;
position: relative;
}
.curved-bottom:before {
height: 50px;
width: 16%;
background-color: white;
border-top-right-radius: 10px;
left: -16%;
content: '';
position: absolute;
top: -8px;
}
.curved-bottom:after {
height: 50px;
width: 16%;
background-color: white;
border-top-left-radius: 10px;
right: -16%;
content: '';
position: absolute;
top: -8px;
}
<div class="top-bar"></div>
<div class="curved-bottom"></div>
If your main horizontal blue bar is a div, and the box sticking down is a separate div, you can use the pseudo elements :before and :after to create those inner radius.
See the following as an example:
html,
body {
padding: 0;
margin: 0;
}
.header {
position: relative;
background-color: #5DC4FD;
width: 100%;
height: 160px;
}
.tab {
position: relative;
top: 130px;
background-color: #5DC4FD;
width: 80%;
height: 100px;
margin: 0 auto;
border-radius: 0 0 30px 30px;
}
.tab:before {
position: absolute;
content: "";
left: -50%;
width: 50%;
height: 100px;
background-color: white;
border-radius: 0 30px 0 0;
}
.tab:after {
position: absolute;
content: "";
right: -50%;
width: 50%;
height: 100px;
background-color: white;
border-radius: 30px 0 0 0;
}
<div class="header">
<div class="tab">
</div>
</div>
Well, you could use overlapping divs like this:
#top {
background: #00BFFF;
width: 100%;
height: 150px;
}
#container{
display: flex;
}
#mid{
background: #00BFFF;
width: 70%;
height: 50px;
border-bottom-left-radius: 25px;
border-bottom-right-radius: 25px;
}
#left{
background: #FFFFFF;
margin-top: -50px;
width: 15%;
height: 50px;
border-top-right-radius: 25px;
}
#right{
background: #FFFFFF;
margin-top: -50px;
width: 15%;
height: 50px;
border-top-left-radius: 25px;
}
<div id="top"></div>
<div id="container">
<div id="left"></div>
<div id="mid"></div>
<div id="right"></div>
</div>
but I'd recommend using a background image with the desired shape
I want to make this exapmle in css3 and html5 in div.
thanx for all!
Actually I should not be answering this. SO is for helping you when you are stuck with your code, not for having others write the code for you. But hey, it is Easter, and since it is so easy...
div {
background: black;
width: 250px;
height: 250px;
border-radius: 50%;
margin-left: 150px;
position: relative;
}
div:before {
content: '';
position: absolute;
left: -150px;
top: 50px;
bottom: 50px;
right: -75px;
background: red;
border-top-left-radius: 40px 75px;
border-bottom-left-radius: 40px 75px;
z-index: -1;
}
and a demo: http://jsfiddle.net/o004hrqz/
Let me know if you want me to explain anything.
<html>
<head>
<style type="text/css">
.div1 {
width: 250px;
height: 60px;
margin-top: 50px;
background-color: #F00;
position: relative;
border-top-left-radius: 40px 75px;
border-bottom-left-radius: 40px 75px;
}
.div2 {
width: 100px;
height: 100px;
background-color: #000;
border-radius: 50%;
position: absolute;
left: 40px;
top: -20px;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2">
</div>
</div>
</body>
</html>
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