I wanted to display the parent’s gradient from the child’s shape.
I tried adding ::after I parent it with a white background to hide the parent’s background color, but the child’s background is also white.
Currently: https://jsfiddle.net/5kn6smj8/4/
<div id="parent">
<div class="child top-10"></div>
<div class="child top-20"></div>
<div class="child top-40"></div>
<div class="child top-60"></div>
</div>
#parent {
background: linear-gradient(#e66465, #9198e5);
width: 100px;
height: 300px;
}
.child {
position: relative;
width: 50px;
height: 50px;
border: 1px solid blue;
border-radius: 50%;
color: white;
}
.top-10 {
top: 10px;
}
.top-20 {
top: 20px;
}
.top-40 {
top: 40px;
}
.top-60 {
top: 60px;
}
Be expected:
Also, the position of the child can be changed.
Hello emoiishaaq,
You may want to check if this code does what you want…
HTML
<body>
<div id="parent">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>CSS
body {
background-color: #f9f9f9;
font: normal 1em / 1.5em sans-serif;
}
#parent {
width: 3.19em;
padding: 1em 2em;
margin: 1em auto;
border: 1px solid #000;
border-radius: 0.5em;
background-color: #fff;
box-shadow: 0.4em 0.4em 0.4em rgba( 0, 0, 0, 0.4 );
}
#parent > div {
width: 3.125em;
height: 3.125em;
border: 1px solid #00f;
border-radius: 50%;
background-image: linear-gradient(#e66465, #9198e5);
background-size: 3.25em 18.75em;
}
#parent > div:nth-of-type(1) {
margin-bottom: 0.625em;
}
#parent > div:nth-of-type(2) {
margin-bottom: 1.25em;
background-position: 0 -3.75em
}
#parent > div:nth-of-type(3) {
margin-bottom: 1.875em;
background-position: 0 -8.1255em
}
#parent > div:nth-of-type(4) {
margin-bottom: 1.25em;
background-position: 0 -13.125em
}
