Wie kann ich in CSS nur mithilfe von CSS invertierte geschöpfte Ecken erstellen?

Umgekehrte gewölbte Ecken mit reinem CSS erstellen

In CSS ist das Erstellen abgerundeter Ecken mit der Eigenschaft „border-radius“ ganz einfach. Um umgekehrte gewölbte Ecken zu erzielen, bei denen sich die Ecken nach innen krümmen, ist jedoch eine fortgeschrittenere Technik erforderlich.

Um umgekehrte gewölbte Ecken zu erstellen, verwenden wir den folgenden Ansatz:

• Erstellen Sie eine transparentes Quadrat mit verstecktem Überlauf.
• Platzieren Sie einen transparenten Kreis mit einem Kastenschatten innerhalb des Quadrats.
• Passen Sie die Position des Kreises so an, dass nur ein Viertel davon sichtbar ist.

Code-Implementierung

#box {
  position: relative;
  width: 200px;
  height: 50px;
  background-color: blue;
  border-radius: 9999px 0 0 9999px;
  margin: 30px;
  text-align: center;
  color: #fff;
  padding-top: 10px;
}

#top,
#bottom {
  position: absolute;
  height: 30px;
  width: 30px;
  right: 0;
  overflow: hidden;
}

#top {
  top: -30px;
}

#bottom {
  bottom: -30px;
}

#top::before,
#bottom::before {
  content: '';
  position: absolute;
  right: 0;
  height: 200%;
  width: 200%;
  border-radius: 100%;
  box-shadow: 10px 10px 5px 100px blue;
  z-index: -1;
}

#top::before {
  top: -100%;
}

Das obige ist der detaillierte Inhalt vonWie kann ich in CSS nur mithilfe von CSS invertierte geschöpfte Ecken erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!