Html Question posted in
Some basic documentation can be found here.

Html – 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

Tags:

2

Answers


  1. 0

    Add in a body styles:

      background-image: linear-gradient(transparent 150px, #00f 150px);

    The red color in your layout is set as a background for the body. Just make the background at the beginning red and under the next element blue.

    * {
  margin: 0;
  padding: 0;
}

body {
  background-color: #f00;
  background-image: linear-gradient(transparent 150px, #00f 150px);
}

.wrap {
  position: relative;
  overflow: hidden;
}

.txt {
  background-color: #00f;
  height: 300px;
  translate: none;
  rotate: none;
  scale: none;
  transform: translate3d(0px, 150px, 0px);
}

.next {
  position: relative;
  height: 1000px;
  background-color: #ccc;
  border-radius: 20px 20px 0 0;
}
    <div class="wrap">
  <div class="txt">text</div>
</div>
<div class="next">next</div>
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search