Создание диаграммы Венна из 3-х кругов с чистым css/html

Может быть, нет способа, но я ищу, чтобы создать 3 круга, которые, казалось бы, перекрываются, но будут фактически отдельными объектами с чистым css. Я могу легко создать форму полумесяца, но мне также нужен этот объект, чтобы реагировать только на фактический цветной объект, а не на границу.

Мне нужно сделать что-то вроде этого:

enter image description here

И чтобы показать вам больше того, что я имею в виду, каждый объект должен быть его собственной формой: enter image description here

На самом деле предпочитайте css, если это возможно. SVG может быть другим способом, но опять же, мне нужно, чтобы каждый объект реагировал на видимый объект при наведении/щелчке и НЕ вне его видимой области.

Ответы

Ответ 1

Создание форм действительно вогнутых в CSS очень сложно, в этом случае лучшим выбором будет SVG.

Но, если вы хотите получить чистое решение CSS, возможно, вам не нужны действительно эти фигуры. Если вы установили z-index в порядке, то вы можете получить свой самый верхний 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>

Ответ 2

Лучшим инструментом для использования является 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>

Ответ 3

У меня есть решение SVG для вашего вопроса:

DEMO: 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/

Вы можете щелкнуть по зеленым или черным частям.

Ответ 4

DEMO: http://jsfiddle.net/u5e5mhgx/

Я считаю, что окончательное сочетание зависит от цвета и прозрачности кругов, например:

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

Ответ 5

Используя свойство border-radius, вы можете создать чистую диаграмму css Venn следующим образом:

Здесь мое перо 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>