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 :
Related
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
I am trying to put a div at the centre . Thats works well but it is not visible on the lower div. i.e the lower div hides the content of the center div. My html code :
.outerWrap {
position: relative;
z-index: 0;
background-color: #00CCFF;
height: 350px;
width: 650px;
}
.layer1 {
position: absolute;
z-index: 1;
background-color: #6F0;
height: 250px;
width: 350px;
top: 240px;
left: 40px;
}
.layer2 {
position: absolute;
z-index: 2;
background-color: #FC0;
height: 250px;
width: 650px;
top: 350px;
left: 0px;
}
<div class="outerWrap">1
<div class="layer1">2</div>
<div class="layer2">3</div>
</div>
Few things:
You don't have to use z-index for all the div's, if you want a specific div to be in front then just give z-index to that.
Since you already using div in your code, the div will sit beneath another be default and in your case layer-1 you want that to be in the front, so just use the z-index only for that and remove for others.
The higher the z-index value it display up-front.(in my code it is simple z-index:1`.)
.outerWrap {
position: relative;
background-color: #00CCFF;
height: 350px;
width: 650px;
}
.layer1 {
position: absolute;
z-index: 1;
background-color: #6F0;
height: 250px;
width: 350px;
top: 240px;
left: 40px;
}
.layer2 {
position: absolute;
background-color: #FC0;
height: 250px;
width: 650px;
top: 350px;
left: 0px;
}
<div class="outerWrap">1
<div class="layer1">2</div>
<div class="layer2">3</div>
</div>
You got your z-index backwards. put layer1 at 2 and layer2 at 1
.outerWrap {
position: relative;
z-index: 0;
background-color: #00CCFF;
height: 350px;
width: 650px;
}
.layer1 {
position: absolute;
z-index: 2;
background-color: #6F0;
height: 250px;
width: 350px;
top: 240px;
left: 40px;
}
.layer2 {
position: absolute;
z-index: 1;
background-color: #FC0;
height: 250px;
width: 650px;
top: 350px;
left: 0px;
}
<div class="outerWrap">1
<div class="layer1">2</div>
<div class="layer2">3</div>
</div>
I have tried playing around with z-index and with position, but I can't get the hair-main div to stack behind the head div. Obviously I want the child div to sit behind the parent.
.goals {
align-items: center;
background: #e3e3e3;
display: flex;
grid-row: 3/4;
height: 500px;
width: 100vw;
}
.circle {
display: table-cell;
/*vertical-align: middle;*/
background: #3c759a;
border-radius: 100%;
height: 300px;
overflow: hidden;
position: relative;
width: 300px;
}
.body {
background: #222;
border-radius: 35px;
height: 400px;
left: 75px;
position: relative;
top: 170px;
width: 150px;
}
.head {
background: #ffe4be;
border-radius: 20px;
height: 100px;
left: 100px;
position: absolute;
top: 80px;
width: 100px;
}
.hair-main {
background: #e7ab57;
border-radius: 34px 34px 0px 0px;
height: 70px;
left: -10px;
position: relative;
top: -10px;
width: 120px;
}
<div class="goals">
<div class='circle'>
<div class='body'></div>
<div class='head'>
<div class="hair-main"></div>
</div>
</div>
</div>
Your statement of "obviously, I want the child div to sit behind the parent" is counter to the way html works (*sometimes). Obviously, the child element sits within the parent above the previous items within that parent, unless re-ordered by z-index, barring any -1 z-index tricks... or javascript manipulation... or... Okay, it's not that obvious. :)
I think that you will have future stacking and positioning problems if you actually force the child to sit behind the parent div like you want, and strongly suggest that you use a different dom structure. How about a head that contains hair and then a face. Then the face can contain eyes and ears and so forth and the positioning will all stack naturally in dom order?
.goals {
align-items: center;
background: #e3e3e3;
display: flex;
grid-row: 3/4;
height: 500px;
width: 100vw;
}
.circle {
display: table-cell;
/*vertical-align: middle;*/
background: #3c759a;
border-radius: 100%;
height: 300px;
overflow: hidden;
position: relative;
width: 300px;
}
.body {
background: #222;
border-radius: 35px;
height: 400px;
left: 75px;
position: relative;
top: 170px;
width: 150px;
}
.head {
background: #ffe4be;
border-radius: 20px;
height: 100px;
left: 100px;
position: absolute;
top: 80px;
width: 100px;
z-index: 1;
}
.hair-main {
background: #e7ab57;
border-radius: 34px 34px 0px 0px;
height: 70px;
left: 90px;
position: absolute;
top: 68px;
width: 120px;
}
<div class="goals">
<div class='circle'>
<div class='body'></div>
<div class="hair-main"></div>
<div class='head'></div>
</div>
</div>
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>
I am trying to make nested divs, so I can position children with top and left, so they can overlap each other:
https://jsfiddle.net/e0cpuarv/
.boo {
position: absolute;
left: 10px;
top: 10px;
width: 100px;
height: 70px;
background-color: red;
}
.kah1 {
position: absolute;
left: 20px;
top: 30px;
width: 50px;
height: 50px;
background-color: green;
}
.kah2 {
position: absolute;
left: 30px;
top: 40px;
width: 50px;
height: 50px;
background-color: blue;
}
<body>
<div class="boo">
<div class="kah1"></div>
<div class="kah2"></div>
</div>
</body>
It works with one huge drawback - children just are on the top of parent. What should I do to make them be inside parent, like this?
desiredresult
In fact, children may be not DIVs, IMGs will be enough too, if this helps
try this one:
body{margin:0px;padding:0px;}
.boo {
position: absolute;
left: 10px;
top: 10px;
width: 100px;
height: 70px;
background-color: red;
}
.kah1 {
position: absolute;
left: 20px;
top: 30px;
width: 50px;
height: 40px;
background-color: green;
}
.kah2 {
position: absolute;
left: 30px;
top: 40px;
width: 50px;
height: 30px;
background-color: blue;
}
DEMO HERE
Change this:
.boo {
position: absolute;
left: 10px;
top: 10px;
width: 100px;
height: 70px;
background-color: red;
}
to this:
.boo {
position: absolute;
left: 10px;
top: 10px;
width: 100px;
height: 70px;
background-color: red;
overflow: hidden;
}
Here is the JSFiddle demo
Basically you add overflow:hidden to the parent element .boo :)
just make the main div (.boo) position: relative
see the code, and change the left and top values for kah1 and kah2 to position the inner boxes
.boo {
position: relative;
margin-left: 10px;
margin-top: 10px;
width: 100px;
height: 70px;
background-color: red;
}
.kah1 {
position: absolute;
left: 25px;
top: 12px;
width: 50px;
height: 50px;
background-color: green;
}
.kah2 {
position: absolute;
right: 25px;
top: 12px;
width: 50px;
height: 50px;
background-color: blue;
}
<body>
<div class="boo">
<div class="kah1"></div>
<div class="kah2"></div>
</div>
</body>
You can hide the overwflow with overflow: hidden, so in your case the css would be like this:
.boo {
position: absolute;
left: 10px;
top: 10px;
width: 100px;
height: 70px;
background-color: red;
overflow: hidden;
}
.kah1 {
position: absolute;
left: 20px;
top: 30px;
width: 50px;
height: 50px;
background-color: green;
}
.kah2 {
position: absolute;
left: 30px;
top: 40px;
width: 50px;
height: 50px;
background-color: blue;
}
<body>
<div class="boo">
<div class="kah1"></div>
<div class="kah2"></div>
</div>
</body>