Photoshop Question posted in
The official user guide can be found here.

Make a curve in a div with background image – Photoshop

I’m stuck with one task and I can’t find any solution over the internet.
I have this situation:

enter image description here

Images 1 and 2 has background images.

I need one 1st or 2nd image have that bump.
If it would be 1st image, that bump should extend div bottom and overlay the 2nd background.
If it would be 2nd div then I need like a crater/hole at the top and be under 1st div.

I can’t cut my images to .png/.gif and cut with that bump in photoshop. These images are changed by client, so he can’t prepare exact images all the time, so I need to extend them by code.

I tried to radial-gradient() background and cut with svg, but those aren’t supported by Firefox.

Is it possible to make this with code who adapts to all background images?

Tags:

2

Answers


  1. 0

    You need to use border-color

    border-color: transparent transparent #555 transparent;

    Basically you need to mark some percentage of left and right of the image border-color as transparent.

    And then set border-radius to give the curve

    Thanks.

    Login or Signup to reply.
  2. 0

    Here is a solution that uses background-size: cover, so it is easier to adapt. (It would be easier with known dimension images).

    The drawback is a little complex markup, 3 auxiliar divs are needed.

    The curves are standard border-radius, so that can be adjusted as needed

    .container {
  width: 600px;
  height: 400px;
  border: solid 1px blue;
  position: relative;
}
.up {
  width: 100%;
  height: 50%;
  position: relative;
  border-bottom: 40px solid transparent;
  background-image: url(http://lorempixel.com/600/400);
  background-size: cover;
  background-position: center bottom;
  background-origin: border-box;
  background-clip: padding-box;
  margin-bottom: -40px;
}
.addon {
  width: 25%;
  height: calc(100% + 40px);
  position: absolute;
  left: 37.5%;
  border-radius: 0px 0px 50px 50px;
  overflow: hidden;
  background-image: inherit;
  z-index: 2;
}
.addon:before {
  content: "";
  position: absolute;
  width: 400%;
  height: 100%;
  left: -150%;
  background-image: inherit;
  background-size: cover;
  background-position: center bottom;
  background-origin: padding-box;
  background-clip: padding-box;
}
.down {
  width: 100%;
  height: 50%;
  position: relative;
  bottom: 40px;
  border-top: 40px solid transparent;
  background-image: url(http://lorempixel.com/400/200);
  background-size: cover;
  background-position: center top;
  background-origin: border-box;
  background-clip: padding-box;
  margin-top: -40px;
}
.addleft {
  width: 37.5%;
  height: calc(100% + 40px);
  position: absolute;
  left: 0px;
  bottom: 0px;
  border-radius: 0px 50px 0px 0px;
  overflow: hidden;
  background-color: tomato;
  background-image: inherit;
  background-size: 0px 0px;
}
.addleft:before {
  content: "";
  position: absolute;
  width: 266.667%;
  height: 100%;
  left: 0px;
  background-image: inherit;
  background-size: cover;
  background-position: center top;
  background-origin: padding-box;
  background-clip: padding-box;
}
.addright {
  width: 37.5%;
  height: calc(100% + 40px);
  position: absolute;
  right: 0px;
  bottom: 0px;
  border-radius: 50px 0px 0px 0px;
  overflow: hidden;
  background-image: inherit;
  background-size: 0px 0px;
}
.addright:before {
  content: "";
  position: absolute;
  width: 266.667%;
  height: 100%;
  right: 0px;
  background-image: inherit;
  background-size: cover;
  background-position: center top;
  background-origin: padding-box;
  background-clip: padding-box;
}
    <div class="container">
  <div class="up">
    <div class="addon"></div>
  </div>
  <div class="down">
    <div class="addleft"></div>
    <div class="addright"></div>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search