Help div rounded corners problem_html/css_WEB-ITnose

Now there are four rounded corner cutting pictures: upper left, upper right, lower left and lower right.
How to set the div background color to rounded corners? How to put four pictures on the four corners of the div? Help?

Reply to the discussion (solution)

demo this here

<div class="box"> <div class="box-outer">    <div class="box-inner">        <p>sdfsdffffddsfdf</p>    </div><div><div>.box{background:url(左下) no-repeat left bottom}.box-outer{background:url(右下)no-repeat right bottom;}.box-inner{background:url(左上) no-repeat  left top;}p{background:url(右上) no-repeat right top;}

The specific position of the picture can be adjusted using the four orientation values ​​of padding

CSS code?12345678910111213141516171819208f9e4409b06fde1ff1d3a80f075ca0ed e9a6615fb58013b7e79fe05b6e2227e7 df538377740c6157d4de2aac3ecca226aedc6dce4a544fdca2df29d5ac0ea9906bdc6dce4a544fdca2df29d5ac0ea9906b .box{background:url(lower left) no-r...

Hero? exist?

Now every corner is like this, how to set padding, for example, in the lower left corner I set it like this
.box{
background:url(lower left) no-repeat left bottom;
padding-left: 13px;
padding-bottom: 13px;
}
Isn’t this possible?

It seems that the surrounding area of ​​your picture is transparent, and most of it is black and gray. Then the background color should be as contrasting as possible with the color of the corner image. Also, don’t set the background color of the div. Let it inherit the background of the body and it will look better.

Your picture seems to be transparent around it, and most of it is black and gray. Then the background color should be as contrasting as possible with the color of the corner image. Also, don’t set the background color of the div. Let it inherit the background of the body and it will look better

What we want now is a div area with a background color, the corners are rounded, the div background color and the color of the picture Consistently, there are many examples on the Internet that do not require pictures. How to set up the pictures using these four corners?

Your picture seems to be transparent around it, and most of it is black and gray. Then the background color should be as contrasting as possible with the color of the corner image. Also, don’t set the background color of the div. Let it inherit the background of the body and it will look better

In the code you gave me, the four pictures are added. How can I change the color of the div outside the rounded corners to the body The color is the same

Have you set the background color of your div?

Have you set the background color of your div?

Yes, it is set up

You can read the book "CSS Thorough Design and Research", which explains it in more detail. You can also read this article about CSS rounded corner production. , I hope it will be helpful to the original poster~

This is difficult to handle because the corner of your small picture is transparent. If your div has a background color set, it is inconsistent with the background color of the body. , then this technology is a failure

This is difficult to handle because the corners of your small picture are transparent. If your div has a background color set, it is inconsistent with the background color of the body. , then this technology is a failure

Well, thank you very much, there is no way to design it like this. I will change the design according to what is said on the Internet without pictures

border-radius: 5px