This is the second day of my participation in the August Text Challenge.More challenges in August

Problem a

Use background to create a rounded gradient background similar to the following image

Train of thought

You need to make a larger box based on the current one, as shown in the red box below (for example, set width to 150%). Then create an arc effect by setting the border-bottom-left-radius and border-bottom-right-radius of the box.

After setting up radius, drag the large box back a certain distance to the left (say 25% to the left) so that the viewport is directly in the center of the large box, as shown in the figure below. You can use Position to set the position of the large box in the background.

Code (streaming layout)

<! -- Focus section -->
        <div class="banner">
            <! -- Created a big box background effect with a label background -->
            <div class="banner-bg"></div>
            <! Below is the slide focus section -->
        </div>
Copy the code
.banner {
    position: relative;
    width: 100%;
    height: 187px;
    overflow: hidden;
}

.banner .banner-bg {
    position: absolute;
    left: -25%;
    width: 150%;
    height: 145px;
    background-color: #C82519;
    border-bottom-left-radius: 100%;
    border-bottom-right-radius: 100%;
    background-image: linear-gradient(0deg.#f1503b.#c82519 50%);  / * * / ramp
}
Copy the code

Question 2

Create a curved background using the image below

Train of thought

The same idea is that you need to make a big box and set the border-bottom-left-radius and border-bottom-right-radius of the box to create an arc effect.

The difference is that in the following code, instead of directly setting a large box with a width of 150%, you set a width of 100% and a box, creating a large box by using a 25% value on each side. For and tags, no additional width Settings are required.

One notable point is that this time around overflow: Hidden is set directly to the parent

, so that the child element can only show the part inside the arc by hiding the excess, rather than setting the arc directly on the child element.

The image is at some distance to the left, because the parent element has the padding set, which is 25%. But you can’t just move the big box represented by the parent element 25% to the left, because the 25% is 100% width, and the width of the big box is 150% with the padding on both sides, so you have to move 25% of the 150% to the left. So 25%/150% = 1/6 = 16.666%. So the correct way would be to move 16.666% to the left, not 25%

code

<! -- Focus section -->
    <div class="focus">
        <a href="#">
            <img src="images/banner.jpg" alt="">
        </a>
    </div>
Copy the code
/* Focus graph style */
.focus {
  width: 100%;
  padding: 0 25%;
  border-bottom-left-radius: 100%;
  border-bottom-right-radius: 100%;
  transform: translateX(-16.666%);
  overflow: hidden;
}
.focus a {
  display: block;
}
.focus a img {
  display: block;
  width: 100%;
}
Copy the code