I am trying to add a bottom background to a Flex div
so that it becomes like this:
The bottom background is the following cut:
However the bottom background is not showing.
.group {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
}
.block {
flex: 25%;
}
@media only screen and (max-width: 600px) {
.block {
flex: 50%;
}
}
.main, .block {
display: flex;
flex-grow: 1;
}
.main {
padding: 10px;
}
.text {
flex-grow: 1;
background-color: green;
padding: 10px;
}
.text::after {
background: transparent url("https://i.stack.imgur.com/qN0S5.png") no-repeat center bottom / 100% auto;
}
<div class="group">
<div class="block">
<div class="main">
<div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>
</div>
<div class="block">
<div class="main">
<div class="text">Lorem ipsum.</div>
</div>
</div>
<div class="block">
<div class="main">
<div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>
</div>
<div class="block">
<div class="main">
<div class="text">Lorem ipsum dolor sit amet.</div>
</div>
</div>
</div>
How to to this?
2
Answers
You forgot to add position and content for after and .text:after must have height and width to display your background image.
You can check code below.
There is another way using clip-path for more visit link https://css-tricks.com/exploring-the-css-paint-api-rounding-shapes/
Use
position
,content
,padding-top
,margin-bottom
.it’s too wordy to explain you can ask me what i don’t understand