Creating a 3 circle Venn diagram with pure css/html

Question

Maybe there\'s not a way, but I\'m looking to create 3 circles that would appear to overlap, yet would be actually individual objects with pure css. I can easily create a c

Answer 1

Making the shapes really concaves in CSS is really hard, in this case your best bet would be SVG.

But, if you want a pure CSS solution, may be you don't need really those shapes. If you set your z-index ok, then you can get your topmost div to hide the others, and then you don't care about the concave side ...

In this demo, the hover works ok. It would be the same for other events.

div {
  width: 240px;
  height: 240px;
  position: absolute;
  border-radius: 50%;
}

.innerw {
  left: 0px;
  top: 0px;
  overflow: hidden;
}

.innerw2 {
  left: 170px;
  top: 0px;
  overflow: hidden;
}

.inner {
  left: -85px;
  top: 130px;
  background-color: palegreen;
  z-index: 20;
}

.inner:hover {
  background-color: green;
}

#midw1 {
  left: 0px;
  top: 0px;
  overflow: hidden;
}
#mid1 {
  left: 170px;
  top: 0px;
}
#midw2 {
  left: 0px;
  top: 0px;
  overflow: hidden;
}
#mid2 {
  left: 85px;
  top: 130px;
}
#midw3 {
  left: 170px;
  top: 0px;
  overflow: hidden;
}
#mid3 {
  left: -85px;
  top: 130px;
}
.mid {
  background-color: lightblue;
  z-index: 15;
}
.mid:hover {
  background-color: blue;
}


#outer1 {
  left: 0px;
  top: 0px;
}

#outer2 {
  left: 170px;
  top: 0px;
}
#outer3 {
  left: 85px;
  top: 130px;
}
.outer {
  background-color: lightcoral;
  z-index: 10;
}
.outer:hover {
  background-color: red;
}

A more complex layout, bug-free in Chrome and IE

div {
  width: 240px;
  height: 240px;
  border-radius: 50%;
  pointer-events: none;
  position: absolute;
}

.innerw {
  left: 0px;
  top: 0px;
  overflow: hidden;
  position: absolute;
  /* border: solid; */
  z-index: 20;
  /* transform: translateZ(10px); */
  pointer-events: none;
}

.innerw2 {
  margin-left: 0px;
  top: 0px;
  overflow: hidden;
  position: static;
  /* border: solid; */
  /* z-index: 20; */
  pointer-events: none;
}

.innerw3 {
  margin-left: 170px;
  top: 0px;
  overflow: hidden;
  position: static;
  /* border: solid; */
  /* z-index: 20; */
  pointer-events: none;
}

.inner {
  margin-left: -85px;
  margin-top: 130px;
  background-color: palegreen;
  z-index: 20;
  position: static;
  pointer-events: auto;
}

.inner:hover {
  background-color: green;
}

.mwrap {
  position: absolute;
  overflow: hidden;
  pointer-events: none;
  z-index: 10;
}
.mwrap2 {
  position: static;
  margin-left: 0px;
  margin-top: 0px;
  overflow: hidden;
  pointer-events: none;
}
.mid {
  position: static;
  pointer-events: auto;
}
#midaw1 {
  left: 0px;
  top: 0px;
}
#mida {
  margin-left: 170px;
  margin-top: 0px;
}
#midbw1 {
  left: 170px;
  top: 0px;
}
#midb {
  margin-left: -85px;
  margin-top: 130px;
}
#midcw1 {
  left: 85px;
  top: 130px;
}
#midc {
  margin-left: -85px;
  margin-top: -130px;
}
.mid {
  background-color: lightblue;
  z-index: 15;
}
.mid:hover {
  background-color: blue;
}


#outer1 {
  left: 0px;
  top: 0px;
}

#outer2 {
  left: 170px;
  top: 0px;
}
#outer3 {
  left: 85px;
  top: 130px;
}
.outer {
  background-color: lightcoral;
  z-index: 1;
  pointer-events: auto;
}
.outer:hover {
  background-color: red;
}

Thanks to theleggett for his help on this