Erstellen von Effekten mit umgekehrtem Randradius

Frage:

Kann ein umgekehrter Randradius sein? Der Effekt kann dort erzielt werden, wo die Ecken sich zu krümmen scheinen nach innen?

Antwort:

Die native CSS-Eigenschaft „border-radius“ lässt keine negativen Werte zu, die zu einem invertierten Effekt führen würden. Hier ist jedoch ein alternativer Ansatz mit CSS:

Fügen Sie vier zusätzliche Elemente innerhalb des Containers hinzu und stellen Sie sicher, dass sie leicht über seine Grenzen hinausgehen. Diese Elemente sollten mit der Hintergrundfarbe der Seite übereinstimmen und eine Illusion des darunter liegenden Seiteninhalts erzeugen. Positionieren Sie diese Elemente strategisch um die Ecken und wenden Sie einen Randradius an, um den umgekehrten Effekt zu erzielen.

Code-Snippet:

#main {
    margin: 40px;
    height: 100px;
    background-color: #004C80;
    position: relative;
    overflow: hidden;
}

#main div {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 100%;
    background-color: #FFF;
}

.top { top: -10px; }
.bottom { bottom: -10px; }
.left { left: -10px; }
.right { right: -10px; }