css实现两个圆重叠

扬舲

css

发布于：2021年1月7日

工作中有一个需求，实现两个椭圆相交，并且相交区域颜色不同，类似于一个简单的韦恩图，如何用css实现这个效果？经过一番探索，找到了答案。

要实现这个效果，需要用到的神技：css-blend-mode, 它是一个css属性，描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。

有了这个，就可以愉快的直接上代码了：

<div class="isolate">
  <div class="circle circle-1"></div>
  <div class="circle circle-2"></div>
</div>

.circle {
  width: 110px;
  height: 70px;
  border-radius: 50% / 35px;
  mix-blend-mode: color-dodge;
  position: absolute;
  border: 1px solid #fff;
}

.circle-1 {
  background: #39518A;
}

.circle-2 {
  background: #0091FF;
  top: 40px;
}


.isolate {
  isolation: isolate; /* Without isolation, the background color will be taken into account */
  position: relative;
}