htmlcsstransform

How to make the background color or image of border-radius appear as intended

I want the background color or image of .txt to be displayed as the background color or image of the border-radius of .next. I'd like to know how to do this without changing the transform of .txt.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    body {
      background-color: #f00;
    }
    .wrap {
      position: relative;
      overflow: hidden;
    }
    .txt {
      background-color: #00f;
      height: 300px;
      translate: none;
      rotate: none;
      scale: none;
      transform: translate3d(0px, 150px, 0px);
    }
    .txt img {
      width: 100%;
    }
    .next {
      position: relative;
      height: 1000px;
      background-color: #ccc;
      border-radius: 20px 20px 0 0;
    }
  </style>
</head>
<body>
  <div class="wrap">
    <div class="txt"><img src="https://picsum.photos/640/360" alt=""></div>
  </div>
  <div class="next">next</div>
</body>
</html>

image

current and expected

Solution

  • I have a different solution compared to 'Andrei' but before that I would like to address the issue of why its happening.

    So you have added border-radius to next which basically shrinks border of next and revels component behind it and in your case its body with background color red.

    To resolve this issue you can use andrei solution but if this same thing happens with multiple element with different colors or something else then adding linear-gradient would be less effective.

    What I usually do with this kind of situation is adding margin-top in negative so it moves element up and above its top element. In your case I have added margin-top: -15px to next this won't cause any trouble even with different type of elements.

    Below is working example.

    * {
      margin: 0;
      padding: 0;
    }
    body {
      background-color: #f00;
    }
    .wrap {
      position: relative;
      overflow: hidden;
    }
    .txt {
      background-color: #00f;
      height: 300px;
      translate: none;
      rotate: none;
      scale: none;
      transform: translate3d(0px, 150px, 0px);
    }
    .txt img {
      width: 100%;
    }
    .next {
      margin-top: -20px;
      position: relative;
      height: 1000px;
      background-color: #ccc;
      border-radius: 20px 20px 0 0;
    }
    <div class="wrap">
    <div class="txt"><img src="https://picsum.photos/640/360" alt=""></div>
  </div>
  <div class="next">next</div>