2

I'm trying to make a shape from two divs and I'm having trouble preventing the background colors from overlapping.

I manage to do that by applying an opacity to a parent but then all child have that opacity too.

body{background:white;
padding:0px;
margin:0px}

#baz{
opacity:0.5}

#foo{
  top:10px;
  left:60px;
height:80px;
width:200px;
background: black;
position:absolute;
border-radius: 0 40px 40px 0  
}

#bar{
height:100px;
width:100px;
background: black;
border-radius:100px;
position:absolute;
}
<div id="baz">
<div id="foo">

</div>
  <div id="bar">
  </div>
</div>

I therefore tried to apply the opacity to the background only using rgba

body{background:white;
padding:0px;
margin:0px}

#baz{
background-color: rgba(0,0,0,0.5);
}

#foo{
  top:10px;
  left:60px;
height:80px;
width:200px;
background: inherit;
position:absolute;
border-radius: 0 40px 40px 0  
}

#bar{
height:100px;
width:100px;
background: inherit;
border-radius:100px;
position:absolute;
}
<div id="baz">
<div id="foo">

</div>
  <div id="bar">
  </div>
</div>

And the backgrounds overlapped again...

Any idea on how to do this ?

Thanks

Théo Champion
  • 1,701
  • 1
  • 21
  • 46

2 Answers2

2

Generally speaking, avoid using <div> to do <svg>'s job.

#badge {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 260 100"><g opacity="0.5"><circle cx="50" cy="50" r="50" fill="#000" /><rect x="40" y="10" width="220" height="80" rx="40" fill="#000" /></g></svg>');
  width: 260px;
  height: 100px;
}
<div id="badge">
  Content Here
</div>

Alternative with SVG embedded in the HTML:

#badge {
  width: 260px;
  height: 100px;
  position: relative;
  z-index: 0;
}
#badge>svg {
  position: absolute;
  z-index: -1;
}
  
<div id="badge">
  <svg viewBox="0 0 260 100">
    <g opacity="0.5">
      <circle cx="50" cy="50" r="50" fill="#000" />
      <rect x="40" y="10" width="220" height="80" rx="40" fill="#000" />
    </g>
  </svg>
  Content Here
</div>
Niet the Dark Absol
  • 320,036
  • 81
  • 464
  • 592
  • I want to use div in that case because the width of the horizontal div depend on the internal content – Théo Champion Apr 25 '18 at 16:30
  • Ah, now that does complicate things a bit... In that case, you may want to do something like my second snippet above, but using your `
    ` construction instead of the SVG - that is, having it inside your container and applying the opacity to that, with `z-index: -1` to place it in the background of your element.
     – Niet the Dark Absol Apr 25 '18 at 16:32
  • Not sure i understand what you are suggesting :/ – Théo Champion Apr 25 '18 at 16:35
-2

I attached a code snippet, adding your 2 graphs into each respective div. Now your can decide yourself if you want the 2 graphs to be separated or touch each other by adjusting the % of "grid-template-columns". If you lower the first % value from 20% to 5% your 2 graphs will be as your pictures.

/* Grid-base */

.grid-1 {
  display: grid;
  grid-template-columns:
  20%
  30%
  1fr
  ;
  grid-template-rows:
  100px
  ;
  grid-template-areas:
  "left-area mid-area right-area"
  ;
}

.left-area {
  grid-area: left-area;
  background-color: grey;
  border-radius: 50px;
  width: 100px;
}

.mid-area {
  grid-area: mid-area;
  background-color: grey;
  border-radius: 0px 50px 50px 0px;
  margin: 10px 0px 10px 0px;
}

.right-area {
  grid-area: right-area;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="index.css">
</head>
<body>

<div class="grid-1">

<div class="left-area"></div>
<div class="mid-area"></div>
<div class="right-area"></div>

</div>

</script>
</body>
</html>
Toolbox
  • 2,333
  • 12
  • 26