Círculo transparente hueco o recortado

Este dilema se puede resolver de diversas maneras, pero en este caso te mostramos la que para nosotros es la resolución más completa.

Solución:

Puedes lograr un círculo transparente recortado con 2 técnicas diferentes:

1.SVG

Los siguientes ejemplos usan un svg en línea. El primer fragmento usa el elemento de máscara para cortar el círculo transparente y el segundo círculo hueco se hace con un elemento de ruta. El círculo se hace con 2 comandos de arco:

Con el elemento de máscara:

bodybackground:url('https://farm9.staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg');background-size:cover;

Con un elemento de ruta:

bodybackground: url('https://farm9.staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg');background-size:cover;
svg
  display:block;
  width:70%;
  height:auto;
  margin:0 auto;

path
  transition:fill .5s;
  fill:#E3DFD2;

path:hover
  fill:pink;

Las principales ventajas de usar SVG en este caso son:

• Código más corto
• Puede utilizar fácilmente una imagen o un degradado para rellenar la máscara del círculo
• mantenga los límites de la forma y active los sobreenvíos del mouse solo sobre el relleno respetando la máscara (Coloca el cursor sobre el círculo recortado transparente en el ejemplo)

2. CSS solo usando BOX-SHADOWS

Crea un div con overflow:hidden; y un pseudo elemento redondo en su interior con border-radius. Dale una gran sombra de caja y sin fondo:

div
    position:relative;
    width:500px; height:200px;
    margin:0 auto;
    overflow:hidden;

div:after
    content:'';
    position:absolute;
    left:175px; top:25px;
    border-radius:100%;
    width:150px; height:150px;
    box-shadow: 0px 0px 0px 2000px #E3DFD2;


bodybackground: url('https://farm9.staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg');background-size:cover;

El soporte del navegador para box-shadows es IE9 + ver canIuse

El mismo enfoque sería utilizar bordes en lugar de sombras de caja. Es interesante si necesita admitir prestatarios que no admiten cajas de sombra como IE8. La técnica es la misma, pero debe compensar con los valores superior e izquierdo para mantener el círculo en el centro del div:

body
    background: url('https://farm9.staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg');
    background-size:cover;

div
    position:relative;
    width:500px; height:200px;
    margin:0 auto;
    overflow:hidden;

div:after
    content:'';
    position:absolute;
    left:-325px; top:-475px;
    border-radius:100%;
    width:150px; height:150px;
    border:500px solid #E3DFD2;

Se puede hacer usando un fondo degradado radial y eventos de puntero (para permitir la interacción del mouse detrás a través de la capa circular, por ejemplo, selección de texto). Aquí está una página de demostración y una captura de pantalla:

Y este sería el código para ello:

  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
  nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
  eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
  in culpa qui officia deserunt mollit anim id est laborum.

Refiriéndome a la respuesta de web-tiki, me gustaría agregar que siempre puedes centrar un div con translate(-50%,-50%), por lo que no sería un problema utilizar el border-propiedad, que tiene una mejor compatibilidad con el navegador.

div
    position:relative;
    width:500px; 
    height:200px;
    margin:0 auto;
    overflow:hidden;

div:after
    content:'';
    position:absolute;
    left:50%;
    top: 50%;
    transform: translate(-50%,-50%);
    border-radius:50%;
    width:150px; height:150px;
    border: 1000px solid rebeccapurple;


bodybackground: url('https://farm9.staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg');background-size:cover;

Puedes ser realmente creativo con esta técnica:

document.addEventListener( "DOMContentLoaded", function() 
	setInterval(function()
		if(document.getElementById("moving").style.height === "500px")
			document.getElementById("moving").style.height = "0px";
		 else 		
			document.getElementById("moving").style.height = "500px";
		
	, 2000);
);

#container 
	width: 500px;
	margin: 0 auto;
	border: 1px solid black;
	overflow:hidden;
	position: relative;



#circle
    position:relative;
    height:150px;
    margin:0 auto;
	clear:left;
	overflow:hidden;

#circle::before, #circle::after 
    content:'';
    border-radius:50%;
	position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);

#circle::before 
    height: 140px;
    width: 140px;
    background: rebeccapurple;

#circle::after
    width:150px; 
	height:150px;
    border: 2000px solid rebeccapurple;


#line 
	margin: 0 auto;
	width: 6px;
	height: 200px;
	position: relative;

#line::before, #line::after 
	content: " ";
	background-color: rebeccapurple;
    height: 200px;
	width:2000px;
	position:absolute;

#line::before 
	right: 100%;

#line::after  
	left: 100%;


#moving 
	height: 0px;
    width: 100%;
    background: blue;
    transition: 2s height;
    position: absolute;
    top: 0px;
    z-index: -1;

body
	background: url('https://farm9.staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg');background-size:cover;

Sección de Reseñas y Valoraciones

Tienes la opción de añadir valor a nuestra información colaborando tu experiencia en las interpretaciones.

---

---

Utiliza Nuestro Buscador