重叠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="http://i.stack.imgur.com/Qf8Ot.png"> <img class="y" src="http://i.stack.imgur.com/Qf8Ot.png"> <img class="z" src="http://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.