I just want to implement the header part like the attachment. Can someone help me to do this using CSS.
Note: You can do it by using 2 divs with absolute positioning with their parent as relative positioned
Working code:
.c-wrapper {
position: relative;
}
.red {
background: red;
width: 100%;
height: 100px;
border-bottom-left-radius: 200px;
border-bottom-right-radius: 200px;
position: absolute;
top: 0;
}
.red-1 {
background: red;
width: 200px;
height: 100px;
border-bottom-left-radius: 100px;
border-bottom-right-radius: 100px;
position: absolute;
top: 70px;
left: 50%;
transform: translateX(-50%);
}
<div class="c-wrapper">
<div class="red"></div>
<div class="red-1"></div>
</div>
Working JSFiddle
Related
I want to remove most of the circle and only show the part of the circle that overlaps a square:
I need to cut the red area and leave the darker green area inside the box.
I have a class named circle with a style
position: absolute;
bottom: 0;
left: 0;
width: 100px;
height: 100px;
and a box with style:
width: 100px;
height: 100px;
How can I remove the red area?
My code: https://codepen.io/anon/pen/xpVJoL
You can use negative values for position and overflow:hidden to hide (cut) the area :
.box {
width: 100px;
height: 100px;
border: 1px solid;
position:relative;
overflow:hidden;
}
.circle {
position: absolute;
bottom: -50px;
left: -50px;
width: 100px;
height: 100px;
border-radius: 50%;
background: red;
}
<div class="box">
<div class="circle"></div>
</div>
UPDATE
And if you want a more fancy way you can use radial-gradient as background and you will have much less code to handle :
.box {
width: 100px;
height: 100px;
border: 1px solid;
background-image:radial-gradient(circle at bottom left, red 45%, transparent 0%);
}
<div class="box">
</div>
Just insert overflow:hidden; in the .container class.
You don't need another div, you can just do it with the :before or :after pseudo-elements:
div {
width: 100px;
height: 100px;
position: relative;
border: 1px solid;
overflow: hidden;
}
div:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 50%;
left: -50%;
border-radius: 50%;
background: red;
}
<div></div>
How can I vertically center align div's using absolute position? The div should have margin-bottom if there are multiple div's found in single column.
.parent {
position: relative;
background: #FF0000;
width: 100%;
height: 100px;
padding:20px 0px;
}
.children_multiple_in_column {
position: absolute;
background: #000;
width: 150px;
height: 20px;
bottom: 50%;
top: 50%;
margin-bottom: 50px;
color: white;
z-index=1;
}
.children_single_in_column {
position: absolute;
background: #000;
width: 150px;
height: 20px;
left: 60%;
bottom: 50%;
top: 50%;
color: white;
z-index=1;
}
JSFiddle is in here: http://jsfiddle.net/richersoon/m8kp92yL/8/
The result should be something like this:
Please disregard the horizontal line it is not important.
Wrap the multiple items in a div and use transform: translateY(-50%); top: 50%; to vertically align.
.parent {
position: relative;
background: #FF0000;
width: 100%;
height: 100px;
padding: 20px 0px;
}
.parent>div {
position: absolute;
background: #000;
width: 150px;
top: 50%;
color: white;
transform: translateY(-50%);
z-index: 1;
}
.children_single_in_column {
left: 60%;
}
.multiple>div {
margin-bottom: 10px;
}
.multiple>div:last-child {
margin-bottom: 0;
}
<div class="parent">
<div class="multiple">
<div class="children_multiple_in_column">Monday Task 1</div>
<div class="children_multiple_in_column">Monday Task 2</div>
</div>
<div class="children_single_in_column">Friday Task 1</div>
</div>
Example: JSfiddle
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'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: