Círculo transparente hueco o recortado

¿Es posible cortar un círculo hueco usando solo CSS ?

Esto podemos hacer todos:

círculo CSS normal

¿Pero podemos hacer esto?

círculo hueco transparente en un div

El círculo debe ser hueco y transparente . Por lo tanto, el problema no se resuelve colocando un círculo de color sólido sobre un div .

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

1.SVG

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

Con el elemento de máscara:

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

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

enter image description here

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.

En referencia a la respuesta de web-tiki, me gustaría añadir que siempre puedes centrar un div con translate(-50%,-50%) , así que no sería problema usar la propiedad border , que tiene un mejor soporte para 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; } body{background: url('https://farm9.staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg');background-size:cover;} 
 

En cuanto al “Método 1” de “Pius Nyakoojo”, con una pequeña mejora (ver abajo) funcionaría. Personalmente creo que esta es la solución más simple:

captura de pantalla

     
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah

Método 1- Preferido

 
 $radius: 50px; $thickness: 5px; .circle { width: $radius; height: $radius; background-color: transparent; border-radius: $radius; border: $thickness solid gray; } 

Método 2

 
 $radius: 50px; $thickness: 5px; .circle { width: $radius; height: $radius; } .circle::before, .circle::after { margin: -2px 0; } .circle::before { content: ''; display: inline-block; width: $radius; height: calc(#{$radius} / 2); background-color: transparent; border-top-left-radius: calc(#{$radius} / 2); border-top-right-radius: calc(#{$radius} / 2); border: $thickness solid gray; border-bottom: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .circle::after { content: ''; display: inline-block; width: $radius; height: calc(#{$radius} / 2); background-color: transparent; border-bottom-left-radius: calc(#{$radius} / 2); border-bottom-right-radius: calc(#{$radius} / 2); border: $thickness solid gray; border-top: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }