用純css / html創建一個3圈維恩圖

Question

也許沒有辦法，但我希望創建3個看起來重疊的圓圈，但實際上它們只是具有純css的單個對象。 我可以很容易地創建一個新月形狀，但我也需要這個對象只對實際的彩色物體有反應，而不是邊界。

我需要做這樣的事情：

為了向您展示我的意思，每個對象都需要像這樣自己的形狀：

如果可能，真的更喜歡CSS。 SVG可能是另一種方式，但同樣，我需要每個對象在懸停/點擊時對可見對象做出反應，而不是在可見區域之外。

Answer 1

在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對此的幫助

Answer 2

最好的工具是SVG。 Vals用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> 

Answer 3

我有你的問題的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 4

演示： http ： //jsfiddle.net/u5e5mhgx/

我相信最終的組合取決於圓圈的顏色和透明度，如：

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

Answer 5

使用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>