重叠CSS上的白色边框

Question

可以使用CSS创建：

我尝试过使用PNG图像：

＆＃13;

＆＃13;

.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)
}

＆＃13;

<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">

＆＃13;

＆＃13;

＆＃13;

但我希望重叠是第一张图像的白色。有线索吗？非常感谢你。

Answer 1

使用border-radius创建省略号。

向他们添加box-shadow：

#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

你应该使用box-shadow。使阴影的颜色变白。

也可以使用插入阴影，它会在图像中形成阴影。

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

根据您的浏览器要求使用-webkit-， - moz-， - o-。