0

I've been trying to find the best way to do this aside from using pngs with transparency.

The designer for a site I'm building cut these circles out of every section on the site as part of the overall theme. I love the look of it, but implementing it in a way that would happen automatically is not obvious.

I tried some SVG masking, but it would not show the background behind it. The images ideally could be replaced by a site editor without having to cut this part out of each image. Is there a css, javascript, or canvas way to to what I have in mind?

Also, there are background images in each section. Not just solid colors and gradients.

Click Here to View Example Image

Gary Thorn
  • 3
  • 2

1 Answers1

1

The CSS is straight forward positioning of three <div>s inside a wrapper element (in this case a <section>

The two outer <div>s are the bars, while the inner div creates the illusion of the half-circle. This is done simply by providing a border radius of twice its width.

Once the "circle" is centered and the z-index set, you have your solution.

I've leave putting the arrow into the circle up to you.

section {
  z-index: 50;
  position: relative;
  width: 100vw;
  height: 250px;
}

div {
  z-index: 25;
  position: absolute;
  height: 50%;
  width: 100%;
}
div:nth-child(1) {
 background-image: url(https://via.placeholder.com/160?text=TOP);
 }

div:nth-child(2) {
 background-image: url(https://via.placeholder.com/160/0000FF?text=CENTER);
 background-position: center;
  z-index: 999;
  top: 75px;
  left: calc((100vw/2) - 50px);
  width: 100px;
  height: 100px;
  border-radius: 200px;
}

div:nth-child(3) {
 background-image: url(https://via.placeholder.com/160/FF0000/FFFFFF?text=BOTTOM);
  bottom: 0;
  border: 1px solid black;
}
<section>
  <div></div>
  <div></div>
  <div></div>
</section>
Randy Casburn
  • 13,840
  • 1
  • 16
  • 31
  • I guess the screenshot I made didn't make it clear, but each section has a background image in it. Not a solid background color or even a gradient. – Gary Thorn Feb 06 '21 at 14:59
  • Are you saying that you don't know how to put an image in a div as a background? – Randy Casburn Feb 06 '21 at 15:18
  • No, I am saying once you add backgrounds to both divs that transparent hole goes away. – Gary Thorn Feb 06 '21 at 15:31
  • I suppose I could apply the background to both divs and size the one background with cover and use javascript to match the size for the background on the circle. Let me try that. – Gary Thorn Feb 06 '21 at 15:35
  • Here is an example with background images. Getting your images to fit is up to you, but this works exactly the same way with the same CSS but changing the background color to a background image. – Randy Casburn Feb 06 '21 at 16:00
  • It seems I've fully answered your original question. If you have modifications to your question, please post a new question. – Randy Casburn Feb 06 '21 at 16:00
  • Please consider accepting this answer. – Randy Casburn Feb 06 '21 at 16:01