texto - modo de fusión para formas en css
triangulo css before (2)
Digamos que tengo algunos círculos:
<circle class="first"> </circle>
<circle class="second"> </circle>
con el siguiente css:
circle {
border-radius: 50%;
width: 100px;
height: 100px;
background: #000;
}
¿Cómo puedo lograr el siguiente efecto cuando se superponen?
preferiblemente en css, o con el elemento canvas.
SVG
Este efecto se puede hacer bastante fácil con una sola ruta en <svg>
La regla de relleno sería lo que buscas si las formas se superponen, entonces el efecto que obtienes es este otro color de forma.
<svg width="500px" height="200px" viewBox="0 0 100 500">
<path fill-rule="evenodd" d="
M 50, 100
m -75, 0
a 75,75 0 1,0 150,0
a 75,75 0 1,0 -150,0
Z
M 150, 100
m -75, 0
a 75,75 0 1,0 150,0
a 75,75 0 1,0 -150,0
Z
M 250, 100
m -75, 0
a 75,75 0 1,0 150,0
a 75,75 0 1,0 -150,0
Z
M 350, 100
m -75, 0
a 75,75 0 1,0 150,0
a 75,75 0 1,0 -150,0
Z
M 450, 100
m -75, 0
a 75,75 0 1,0 150,0
a 75,75 0 1,0 -150,0
Z" />
</svg>
Una posible forma es usar la propiedad mix-blend-mode , que en este momento parece no ser compatible en general .
Aquí hay un ejemplo que funciona con Chrome y Firefox (gracias a @vals)
body
{
background-color: white;
}
.circle
{
border-radius: 100px;
background-color: white;
width: 100px;
height: 100px;
float: left;
mix-blend-mode: exclusion;
}
.circle:not(:first-child)
{
margin-left: -20px;
}
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
Al igual que @vals, señaló que necesita establecer un background-color de background-color para el cuerpo (o elemento principal) para que esto funcione en Firefox.
Aquí hay dos buenas referencias sobre este tema:
Tomado de esta fuente: http://codepen.io/chriscoyier/pen/tCykv