so I have circled divs (with border-radius) and each one is connected with a line. Problem is that they are semi-transparent, and they're connected from the center of the div, so you can see a the line through the div. I could make the div opaque, but I wan't to show the background. So, is there a way of hiding specific elements that are behind a div, but show the background of the page? Even if it's using js/jquery.
Here's my simulated situation (in my code lines generate automatically):
https://jsfiddle.net/muud6rqf/2/
body{ background: url(http://www.intrawallpaper.com/static/images/abstract-mosaic-background.png) no-repeat center center fixed; background-size: cover; } .circle{ border: 2px solid red; width: 36px; height: 36px; border-radius: 100%; position: absolute; box-shadow: 0 0 8px 2px rgba(255,0,0,0.6), inset 0 0 8px 2px rgba(255,0,0,0.6); } .simulated-line{ position: absolute; width: 181px; height: 4px; background: green; top: 64px; left: 118px; transform-origin: 0% 50%; transform: rotate(25deg); }<div class="circle" style="left: 100px; top: 46px"></div> <div class="circle" style="left: 260px; top: 121px"></div> <div class="simulated-line"></div>EDIT: This is what it looks like:
This is how I want it:
