skip to Main Content

I am trying to add a bottom background to a Flex div so that it becomes like this:

enter image description here

The bottom background is the following cut:

enter image description here

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


  1. 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/

    .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;
      position:relative;
    }
    
    .text::after {
      width:100%;
      content:'';
      left:0;
      height:35px;
      bottom:-25px;
      position:absolute;
      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>
    Login or Signup to reply.
  2. Use position, content, padding-top, margin-bottom.

    it’s too wordy to explain you can ask me what i don’t understand

    .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;
      /* add */
      position: relative;
      margin-bottom: 18.83408071748879%;
      /* /add */
    
    }
    
    .text::after {
      /* add */
      content: "";
      width: 100%;
      padding-top: 18.83408071748879%;
      position: absolute;
      top: 100%;
      left: 0;
      /* /add */
      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>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search