用纯 css/html 创建 3 圈维恩图

Question

也许没有办法，但我希望创建 3 个看起来重叠的圆圈，但实际上是具有纯 css 的单个对象。我可以很容易地创建一个新月形状，但我还需要这个对象只对实际的彩色对象有反应，而不是边框。

我需要做这样的事情：

为了向您展示更多我的意思，每个对象都需要像这样具有自己的形状：

如果可能的话真的更喜欢css。 SVG 可能是另一种方式，但同样，我需要每个对象对 hover/click 上的可见对象做出反应，而不是在其可见区域之外。

Answer 1

我相信最终的混合取决于圆圈的颜色和透明度，例如：

background-color: rgba(0, 0, 255, 0.4);

Answer 2

使用 border-radius 属性，您可以像这样创建纯 css 维恩图：

这是我的笔http://jsfiddle.net/sLzUG/195/

 .circle{
    position:absolute;
    width:150px;
    height: 150px;

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
    filter: alpha(opacity=30);
    -moz-opacity: 0.3;
    -khtml-opacity: 0.3;
    opacity:0.3;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    border: 2px solid black;
}


#second{position:relative; left:92px; top:4px;
 background: yellow;

}

#first {
    background: blue;
}




#third {
    position: relative; 
    top: -70px;
    left: 40px;
    background: red;
}

#problem{
    font-size: 8pt;
    color:white;
    position: absolute;
    width: 75px;
    height: 75px;
    border-left:2px solid red;
    border-top:2px solid red;
    top : 41px;
    left:71px;
    z-index:-4;
    background:red;
}
#problem:after{
    position:absolute;
    content:" ";
    background:white;
    width:150px;
    height:150px;
    top:-2px;
    left: -2px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    z-index:-3;
}



<div id="first" class="circle"></div>
<div id="second" class="circle"></div>
<div id="third" class="circle"></div>

Answer 3

在 CSS 中制作真正凹面真的很难，在这种情况下，最好的选择是 SVG。

但是，如果您想要一个纯粹的 CSS 解决方案，您可能不需要真的那些形状。如果你设置你的 z-index ok，那么你可以让你最上面的 div 隐藏其他的，然后你就不用关心凹面了...

在此演示中，悬停功能正常。其他活动也一样。

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;
}

<div id="outer1" class="outer">
</div>
<div id="outer2" class="outer">
</div>
<div id="outer3" class="outer">
</div>
<div id="midw1">
<div id="mid1" class="mid"></div>
</div>
<div id="midw2">
<div id="mid2" class="mid"></div>
</div>
<div id="midw3">
<div id="mid3" class="mid"></div>
</div>
<div class="innerw">
<div class="innerw2">
<div class="inner">
</div>
</div>
</div>

更复杂的布局，在 Chrome 和 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;
}

<div id="outer1" class="outer">
</div>
<div id="outer2" class="outer">
</div>
<div id="outer3" class="outer">
</div>
<div id="midaw1" class="mwrap">
<div id="midaw2" class="mwrap2">
<div id="mida" class="content mid"></div>
</div>
</div>
<div id="midbw1" class="mwrap">
<div id="midbw2" class="mwrap2">
<div id="midb" class="content mid"></div>
</div>
</div>
<div id="midcw1" class="mwrap">
<div id="midcw2" class="mwrap2">
<div id="midc" class="content mid"></div>
</div>
</div>
<div class="innerw">
<div class="innerw2">
<div class="innerw3">
<div class="inner">
</div>
</div>
</div>
</div>

感谢 theleggett for his

Answer 4

我有针对您问题的 SVG 解决方案：

演示：http://jsfiddle.net/kboksc04/

代码用多边形重新创建圆和交点。

var r = 200,              // radius of the circles

// colors of the circles
// you can create functions for colors or load them from array etc.
    colors = {            
        a: "#ADD8E6",     
        b: "#FFFACD",     
        c: "#FA8072",
        ab: "#008000",
        bc: "#FF0000",
        ca: "#0000FF",
        abc: "#000000"
    };

// the body of the picture
var board = d3.select("body").append("svg:svg").attr({
    width: 3 * r,
    height: 3 * r
});

// function creates array of x,y pairs for dots
// uses parametric function of circle
// @param {float} x_0, y_0 - center of the circle
// @param {float} r - radius
// @param {integer} n - number of sections  
// @returns {Array} - array of coordinates for "n" dots of polygon
function dots(x_0, y_0, r, n) {
    var a = [],
        d_alpha = 2 * Math.PI / n;
    for (var alpha = 0; alpha < 2 * Math.PI; alpha += d_alpha) {
        a.push([
        x_0 + r * Math.cos(alpha),
        y_0 + r * Math.sin(alpha)]);
    }
    return (a);
}

// the coordinates for points of three basic circles
var shape_a = d3.geom.polygon(dots(r, r, r, 80));
var shape_b = d3.geom.polygon(dots(2 * r, r, r, 80));
var shape_c = d3.geom.polygon(dots(1.5 * r, 2 * r, r, 80));

// intersections of circles in pairs
var shape_a_x_b = shape_a.slice();
shape_b.reverse().clip(shape_a_x_b);

var shape_b_x_c = shape_c.slice();
shape_b.clip(shape_b_x_c);

var shape_c_x_a = shape_c.slice();
shape_a.reverse().clip(shape_c_x_a);

// central intersection for all the circles
// actually it is intersection of pair previous calculated intersections
var shape_abc = shape_c_x_a.slice();
d3.geom.polygon(shape_b_x_c.reverse()).clip(shape_abc);

// drawing
board.append("svg:polygon")
    .attr({
    points: shape_a,
    fill: colors.a
});
board.append("svg:polygon")
    .attr({
    points: shape_b,
    fill: colors.b
});
board.append("svg:polygon")
    .attr({
    points: shape_c,
    fill: colors.c
});
board.append("svg:polygon")
    .attr({
    points: shape_a_x_b,
    fill: colors.ab
});
board.append("svg:polygon")
    .attr({
    points: shape_b_x_c,
    fill: colors.bc
});
board.append("svg:polygon")
    .attr({
    points: shape_c_x_a,
    fill: colors.ca
});
board.append("svg:polygon")
    .attr({
    points: shape_abc,
    fill: colors.abc
});

最后，你可以看到一个带有可点击部分的版本：

http://jsfiddle.net/kboksc04/2/

您可以点击绿色或黑色棋子。

Answer 5

最好用的工具是 SVG。瓦尔斯 CSS 的回答很棒！ ~~但它在我的 GC 中不起作用。~~

对于 SVG，您可以使用带有圆弧的路径元素。 EG，我的形状分为7条弧线。

svg {
  overflow: visible;
}

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="40%" width="40%" viewBox="0 0 100 100" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <style type="text/css">
      path {
        fill: transparent;
        stroke: red;
        stroke-width: 0.5;
      }
      path:hover {
        fill: red;
      }
    </style>
  </defs>
  <path d="M 50 8 A 30 30 0 1 0 21 59 30 30 0 0 1 41 36 30 30 0 0 1 50 8" />
  <path d="M 50 8 A 30 30 0 0 0 41 36 30 30 0 0 1 59 36 30 30 0 0 0 50 8" />
  <path d="M 50 8 A 30 30 0 1 1 79 59 30 30 0 0 0 59 36 30 30 0 0 0 50 8" />
  <path d="M 50 52 A 30 30 0 0 1 21 59 30 30 0 0 1 41 36 30 30 0 0 0 50 52" />
  <path d="M 50 52 A 30 30 0 0 1 41 36 30 30 0 0 1 59 36 30 30 0 0 1 50 52" />
  <path d="M 50 52 A 30 30 0 0 0 79 59 30 30 0 0 0 59 36 30 30 0 0 1 50 52" />
  <path d="M 21 59 A 30 30 0 1 0 79 59 30 30 0 0 1 50 52 30 30 0 0 1 21 59" />
</svg>

如果你想要图像在单独的弧形内（出于某种原因。不要问）

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="40%" width="40%" viewBox="0 0 100 100" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <style type="text/css">
      path {
        fill: transparent;
        stroke: red;
        stroke-width: 0.5;
      }
      path:hover {
        fill: url(#img);
      }
    </style>
    <pattern id="img" patternUnits="userSpaceOnUse" width="100" height="100">
      <image xlink:href="http://www.placecage.com/g/200/300" x="0" y="-25" width="100" height="200" />
    </pattern>
  </defs>
  <path d="M 50 8 A 30 30 0 1 0 21 59 30 30 0 0 1 41 36 30 30 0 0 1 50 8" />
  <path d="M 50 8 A 30 30 0 0 0 41 36 30 30 0 0 1 59 36 30 30 0 0 0 50 8" />
  <path d="M 50 8 A 30 30 0 1 1 79 59 30 30 0 0 0 59 36 30 30 0 0 0 50 8" />
  <path d="M 50 52 A 30 30 0 0 1 21 59 30 30 0 0 1 41 36 30 30 0 0 0 50 52" />
  <path d="M 50 52 A 30 30 0 0 1 41 36 30 30 0 0 1 59 36 30 30 0 0 1 50 52" />
  <path d="M 50 52 A 30 30 0 0 0 79 59 30 30 0 0 0 59 36 30 30 0 0 1 50 52" />
  <path d="M 21 59 A 30 30 0 1 0 79 59 30 30 0 0 1 50 52 30 30 0 0 1 21 59" />
</svg>

用纯 css/html 创建 3 圈维恩图

Creating a 3 circle Venn diagram with pure css/html

html

javascript

css

svg

css-shapes