attribute - title html css
Círculo transparente hueco o recortado (5)
¿Es posible cortar un círculo hueco usando solo CSS ?
Esto podemos hacer todos:
¿Pero podemos hacer esto?
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 .
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:
<html>
<!-- Assuming the stuff to mask is a 100 pixel square -->
<style>
.mask {
position: absolute;
top: -50px; /* minus half the div size */
left: -50px; /* minus half the div size */
width: 100px; /* the div size */
height: 100px; /* the div size */
background-color: transparent;
border-radius: 100px; /* the div size */
border: 50px solid white; /* half the div size */
pointer-events: none; /* send mouse events beneath this layer */
}
.stuff {
position: absolute;
width: 100px; /* the div size */
height: 100px; /* the div size */
overflow: hidden; /* hide the excess of the mask border */
background-color: #CCC;
}
</style>
<body>
<div class="stuff">
<div class="mask"></div>
blah blah blah blah blah
blah blah blah blah blah
blah blah blah blah blah
</div>
</body>
</html>
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;}
<div></div>
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;
}
<div id="container">
<div id="circle"></div>
<div id="line"></div>
<div id="circle"></div>
<div id="moving"></div>
</div>
Método 1- Preferido
<div class="circle"></div>
$radius: 50px;
$thickness: 5px;
.circle {
width: $radius;
height: $radius;
background-color: transparent;
border-radius: $radius;
border: $thickness solid gray;
}
Método 2
<div class="circle"></div>
$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;
}
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;}
<svg viewbox="0 0 100 50" width="100%">
<defs>
<mask id="mask" x="0" y="0" width="80" height="30">
<rect x="5" y="5" width="90" height="40" fill="#fff"/>
<circle cx="50" cy="25" r="15" />
</mask>
</defs>
<rect x="0" y="0" width="100" height="50" mask="url(#mask)" fill-opacity="0.7"/>
</svg>
Con un elemento de ruta:
body{background: 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;
}
<svg viewbox="-10 -1 30 12">
<path d="M-10 -1 H30 V12 H-10z M 5 5 m -5, 0 a 5,5 0 1,0 10,0 a 5,5 0 1,0 -10,0z"/>
</svg>
Las principales ventajas de usar SVG en este caso son:
- Código más corto
- Puede usar fácilmente una imagen o degradado para rellenar la máscara circular
- mantenga los límites de la forma y el mouse desencadenante solo se inventa sobre el relleno respetando la máscara ( sobre el círculo transparente recortado en el ejemplo)
2. CSS solo usando BOX-SHADOWS
Crea un div con overflow:hidden; y un pseudo elemento redondo dentro de él con radio de borde. 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;
}
body{background: url(''https://farm9.staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg'');background-size:cover;}
<div></div>
El soporte del navegador para box-shadows es IE9 + ver canIuse
El mismo enfoque sería usar borde en lugar de sombras de caja. Es interesante si necesita admitir borowsers que no admiten sombras de cuadro como IE8. La técnica es la misma, pero debes compensar con los valores superior e izquierdo para mantener el círculo en el centro de la 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;
}
<div></div>
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:
Y este sería el código para ello:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css" media="screen">
body {
margin: 0;
padding: 0;
}
.underneath {
padding: 0;
margin: 265px 0 0 0;
width: 600px;
}
.overlay {
top: 0;
left: 0;
position: absolute;
width: 600px;
height: 600px;
background: -moz-radial-gradient(transparent 150px, rgba(0,0,0,1) 150px);
background: -webkit-radial-gradient(transparent 150px, rgba(0,0,0,1) 150px);
background: -ms-radial-gradient(transparent 150px, rgba(0,0,0,1) 150px);
background: -o-radial-gradient(transparent 150px, rgba(0,0,0,1) 150px);
pointer-events: none; /* send mouse events beneath this layer */
}
</style>
</head>
<body>
<p class="underneath">
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.
</p>
<div class="overlay"></div>
</body>
</html>