White border on overlap CSS

Question

Can this be created using CSS :

I have tried using PNG images :

.x {
  position:relative;
  top: 100px;
  left: 0px;
  height: 120px;
  width: 300px;
  display: block;
}
.y {
  position:relative;
  top: -20px;
  left: 0px;
  height: 120px;
  width: 300px;
  display: block;
  transform: rotate(60deg);
}
.z {
  position:relative;
  top: -140px;
  left: 0px;
  height: 120px;
  width: 300px;
  display: block;
  transform:rotate(-60deg)
}

<img class="x" src="https://i.stack.imgur.com/Qf8Ot.png">
<img class="y" src="https://i.stack.imgur.com/Qf8Ot.png">
<img class="z" src="https://i.stack.imgur.com/Qf8Ot.png">

But I wanted overlap to be white as the first image. Any clues? Thank you very much.

Answer 1

Create ellipses using border-radius.

Add box-shadow to them :

#a, #a:before, #a:after {
    height:80px;
    width: 300px;
    background: transparent;
    border-radius: 50%;
    border: 5px solid black;
    transform: rotate(30deg);
}
#a {
    position: relative;
    top:100px;
}
#a:before, #a:after {
    position: absolute;
    content: "";
    box-shadow:inset 0 0 0 4px white, 0 0 0 4px white;
}
#a:before {
    transform: rotate(60deg);
}
#a:after {
    transform: rotate(120deg);
}

<div id="a"></div>

Answer 2

You should use box-shadow. Make the color of shadow white.

Use inset shadow also, it will make shadow inside the image.

box-shadow :inset 0 0 5px #FFF, 0 0 5px #FFF ;

use -webkit-, -moz- , -o- according to your browser requirments.