Transparent hohl-oder cut-out-Kreis

Ist es möglich, schneiden den hohlen Kreis mit nur CSS?

Dies können wir alle tun:

Aber können wir dies tun?

Transparent hohl-oder cut-out-Kreis

Den Kreis muss innen hohl sein und transparent. Das problem ist also nicht gelöst, indem Sie einen einfarbigen Kreis über eine div.

Von 'nur CSS' wohl du lieber keine Bilder/Bild-Masken?
Ich möchte dies tun, aber verwenden Sie ein element mit einem hintergrund-Bild und nicht nur einen einfachen Farbe. Ist das möglich?

InformationsquelleAutor chris | 2011-11-27

Es kann getan werden, mit einem radial-gradient hintergrund und pointer-events (damit die Maus-Interaktion hinten durch die Kreis-Ebene, z.B. text-Auswahl). Hier ist eine demo-Seite und ein screenshot:

Transparent hohl-oder cut-out-Kreis

- Und das wäre der code dafür:

<!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>

Du bist herzlich willkommen. Wenn Sie interessiert sind in einem Rechteck punch-through-Fenster, ich habe eine ähnliche Antwort vor einer Weile: stackoverflow.com/questions/7979675/...
Dies aber gibt ein Kreis mit einem sehr "scharfen" Kanten, also wenn jemand eine Lösung hat, produziert Sie einen schön gerendert punch-through-Kreis ist es sehr willkommen.
wenn Sie die Größe des Kreises fest ist, dann gehen Sie mit einem zentrierten Hintergrundbild, aber halten Sie die pointer-events Teil. Wenn die Größe variiert, dann können Sie Masken erstellen von SVG für WebKit developer.mozilla.org/en/CSS/-webkit-mask und Firefox developer.mozilla.org/En/Applying_SVG_effects_to_HTML_content
Die Geige ist kaputt
Die Geige ist nicht kaputt. Siehe die Kopie hier einfügen: output.jsbin.com/wibiyawawi

InformationsquelleAutor Ionuț G. Stan

Bezug auf die "Methode 1" aus "Pius Nyakoojo", mit einer geringfügigen Verbesserung (siehe unten), es würde funktionieren. Ich persönlich halte dies für die einfachste Lösung:

Transparent hohl-oder cut-out-Kreis

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

InformationsquelleAutor Andrew

Methode 1- Am Günstigsten Gelegene

<div class="circle"></div>

$radius: 50px;
$thickness: 5px;

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

Methode 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;
}

Nicht Methode 1 erstellen Sie einfach eine Grenze? Der ganze Bereich außerhalb des Kreises sollte farbig sein. Nicht nur die Grenze.

InformationsquelleAutor Pius Nyakoojo

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.