css cut-out border/shape around element

Question

I'm not even sure this is possible, I'm looking to make a see-trough "border"/cut-out around an element. Like in the image below, the point is to make the background show between the magenta element in the centre and the grey elements.

So far all I have managed is a solid colour border around the magenta element. Using the following class, this gives me the desired result but only on a white background.

.app.center {
  height: 40px;
  width: 28px;
  z-index: 5000;
  border-radius: 3px;
  box-shadow: 0 0 0 3px white;
}

See this fiddle for my entire CSS.

Setting a transparent border as suggested in the comments does not solve my problem (tested in FF40). I am trying to create a transparent gap around my middle div element (the magenta one). Setting a transparent border on this element does not work.

I am looking for a way to clip the sibling divs that fall behind the middle div so a small piece of the background is visible on either side of the middle element that follows the edge/shape of the centre element.

possible duplicate of [How do I make a transparent border with CSS?](http://stackoverflow.com/questions/2506844/how-do-i-make-a-transparent-border-with-css) — mathematician1975, Aug 24 '15 at 06:57
Well, problem is that a "transparent border" will make the border display what is behide it : the other gray figures. — Anthony Granger, Aug 24 '15 at 07:08
In the design I posted here it's a map. The element with the 3 is supposed to inform the user of the element they clicked on can be used in another application. The background can be anything really, a map is most common as I'm working on a GIS application. — Arnold Wiersma, Aug 24 '15 at 07:30
Close-voters, give it a break please. This is **not** a duplicate of that question which you are voting on. Reading first would make it clear. @ArnoldWiersma: you could improve your question by providing more clarity and explaining why it is not a dupe. — Abhitalks, Aug 24 '15 at 08:21

score 3 · Accepted Answer · answered Aug 26 '15 at 10:39

Yes, this is basically impossible. That's why I am trying to provide an answer :-)

My solution will not work on IE, and limits you to use primary colors in the elements. As far as I know, it's the only way to get this result.

The trick is to use a blend mode, that translates gray into transparent. And the borders of the element will be gray, so will show the underlying background

.bkg {
 width: 200px;
 height: 200px;
 border: solid 1px black;
 background-image: repeating-linear-gradient(45deg, white 0px, lightblue 40px);
}

.button {
 width: 100px;
 height: 100px;
 border-radius: 20%;
 border: solid 10px gray;
 position: absolute;
 font-size: 80px;
}

#bt1 {
 left: 40px;
 top: 20px;
 background-color: red;
}

#bt2 {
 left: 80px;
 top: 90px;
 background-color: rgb(255,0,255);
}

.panel {
 position: absolute;
 top: 0px;
 width: 200px;
 height: 200px;
 mix-blend-mode: hard-light;
}

<div class="bkg"></div>
<div class="panel">
    <div class="button" id="bt1">-1-</div>
    <div class="button" id="bt2">-2-</div>
</div>

This is as close to what I was looking for as technically possible, thank you. — Arnold Wiersma, Sep 04 '15 at 06:13

score 2 · Answer 2 · answered Aug 24 '15 at 08:07

If your purpose could be met with a "faux"-transparency, then you could make use of the border-image. However, this is not a true solution. Also, you would lose border-radius when you use a border-image.

The trick is to use as border-image the same image that you use for your background-image on lower-layer div or body. This will give the "illusion" of transparency clipping through the sibling divs which are at a lower-level.

Example:

* { box-sizing: border-box; }
body { background-image: url(https://i.stack.imgur.com/lndoe.jpg); }
.sphere {
    position: relative; background-color: #444;
    left: 200px; top: 100px; height: 100px; width: 200px;
    border-top-right-radius: 100px; border-top-left-radius: 100px;
    text-align: center; padding-top: 10px; color: white;
}
.app {
    position: absolute; transform-origin: center 75px; background: #cc4489;
    border-radius: 5px; left: 72px; top: -72px; height: 64px; width: 52px;
}
div.sphere > .app:first-child {
    transform: scale(0.9) rotate(-30deg);
    background: #adabae; top: -72px; 
}
div.sphere > .app:last-child {
    transform: scale(0.9) rotate(30deg);
    background: #79787a; top: -72px;
}
.app.center {
    height: 64px; width: 52px; z-index: 5000;
    background-clip: padding-box; background-origin: padding-box;
    border-image: url(https://i.stack.imgur.com/lndoe.jpg) 10;
    border-width: 5px;
}

<div class=" sphere">
    <div class="app"></div>
    <div class="app center">3</div>
    <div class="app"></div>
</div>

Fiddle: http://jsfiddle.net/abhitalks/aoh8vc8v/

As applied to your fiddle: http://jsfiddle.net/abhitalks/L6deaazy/3/

Disclaimer: This is faux clipping. clip-path and mask could be better put to use.

This is getting closer to what I'm looking to achieve. Sadly this will not work as the background is dynamic content so I have no way to create the effect. — Arnold Wiersma, Aug 24 '15 at 08:34

css cut-out border/shape around element

2 Answers2