Issue
Every time I try to put something like position:absolute or div::before, div::after. It seems like it does not work. Is this because it's not flex or position:center is not set?
Also:
z-index: -1;
What does it do exactly? can i just do this?
#firstdiv::before,#firstdiv::after
{
width:120;
height:120;
background: #F3AC3C;
margin: 150 0 0 80;
border-radius: 50% 0 50% 50%;
}
#firstdiv::before,::after
{
width:120;
height:120;
background: #F3AC3C;
margin: 150 0 0 80;
border-radius: 50% 0 50% 50%;
}
/1/ the wrong code:
<html lang="en">
<head>
<meta charset="UTF-8"
<meta name="viewport" content="width=device-width", initial-scale=1.0">
<title>Document</title>
<style>
body {
background: #0B2429;
margin: 0;
}
#firstdiv {
width:120;
height:120;
background: #F3AC3C;
margin: 150 0 0 80;
border-radius: 50% 0 50% 50%;
}
#seconddiv{
width:120;
height:120;
background: #998235;
margin: -180 100 0 140;
border-radius: 50% 0 50% 50%;
position:absolute
}
#thirddiv{
width:120;
height:120;
background: #F3AC3C;
margin: -240 100 0 200;
border-radius: 50% 50% 50% 50%;
}
</style>
</head>
<body>
<div id ="firstdiv"></div>
<div id ="seconddiv"></div>
<div id ="thirddiv"></div>
</body>
</html>
/2/ the right one is made by T. Safa Elmalı. Trying to make use of his code and implement in mine so it matches the picture perfectly. The right code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Target #5 Acid Rain</title>
</head>
<style>
body {
background: #0b2429;
display: flex;
justify-content: center;
align-items: center;
/* If you open this file in your browser, please comment out this property to see the shape clearly */
/* min-height: 100vh; */
}
/* middle one */
div {
width: 120px;
height: 120px;
background: #998235;
border-radius: 50% 0% 50% 50%;
position: relative;
}
/* first one(bottom one) */
div::before,
div::after {
content: "";
position: absolute;
width: 120px;
height: 120px;
background: #f3ac3c;
border-radius: 50% 0% 50% 50%;
left: -60px;
top: 60px;
}
/* last one(top one)*/
div::after {
left: 60px;
top: -60px;
z-index: -1;
border-radius: 50%;
}
</style>
<body>
<div></div>
</body>
</html>
These questions are not required but will be helpful. The solution to that image would help the most.
Thanks to Duenna
/3/ If anyone would want to use it when it is actually functional:
<html lang="en">
<head>
<meta charset="UTF-8"
<meta name="viewport" content="width=device-width", initial-scale=1.0">
<title>Document</title>
<style>
body {
background: #0B2429;
margin: 0;
}
#firstdiv {
width:120px;
height:120px;
background: #F3AC3C;
margin: 150 0 0 80;
border-radius: 50% 0 50% 50%;
position: relative;
z-index: 3;
}
#seconddiv{
width:120px;
height:120px;
background: #998235;
margin: -180 100 0 140;
border-radius: 50% 0 50% 50%;
position:relative;
z-index: 2;
}
#thirddiv{
width:120px;
height:120px;
background: #F3AC3C;
margin: -180 100 0 200;
border-radius: 50% 50% 50% 50%;
position: relative;
z-index: 1;
}
</style>
</head>
<body>
<div id ="firstdiv"></div>
<div id ="seconddiv"></div>
<div id ="thirddiv"></div>
</body>
</html>
Solution
The solution is quite simple seeing as you've got 3 divs, just give each one a stacking z-index.
For example...
#firstdiv {
width:120px;
height:120px;
background: #F3AC3C;
margin: 150 0 0 80;
border-radius: 50% 0 50% 50%;
// This is new stuff
position: relative;
z-index: 3,
}
#seconddiv{
width:120px;
height:120px;
background: #998235;
margin: -180 100 0 140;
border-radius: 50% 0 50% 50%;
position:relative
// This is new stuff
z-index: 2,
}
#thirddiv{
width:120px;
height:120px;
background: #F3AC3C;
margin: -240 100 0 200;
border-radius: 50% 50% 50% 50%;
// This is new stuff
position: relative;
z-index: 1,
}
Answered By - Duenna
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.