Wie erstelle ich ein responsives prozentuales Dreieck in CSS?

CSS: Generieren eines reaktionsfähigen prozentualen Dreiecks

Die Herausforderung besteht darin, mit CSS einen Pfeil unter einem Hyperlink-Element zu erstellen, aber das anzugeben Die Randbreite in Pixel stellt eine Einschränkung der Reaktionsfähigkeit dar. Dieser Artikel zeigt eine Lösung, die ein verzerrtes und gedrehtes Pseudoelement verwendet, um ein Dreieck mit prozentualer Größe zu erreichen.

Responsive Triangle-Implementierung

.btn {
  position: relative;
  display: inline-block;
  height: 50px;
  width: 50%;
  text-align: center;
  color: white;
  background: gray;
  line-height: 50px;
  text-decoration: none;
  padding-bottom: 15%;
  background-clip: content-box;
  overflow: hidden;
}

.btn:after {
  content: "";
  position: absolute;
  top: 50px;
  left: 0;
  background-color: inherit;
  padding-bottom: 50%;
  width: 57.7%;
  z-index: -1;
  transform-origin: 0 0;
  transform: rotate(-30deg) skewX(30deg);
}

Innerhalb der In der Klasse „.btn“ entfernen wir die feste Breite, sodass sich die Größe des Dreiecks an die Breite des Inhalts anpassen kann. Das „.btn:after“-Pseudoelement wird absolut positioniert, um X geneigt und gedreht, um die Dreiecksform zu erstellen, und seine Hintergrundfarbe stimmt mit dem Hintergrund der Schaltfläche überein.

Durch die Verwendung von padding-bottom behalten wir das Seitenverhältnis des Dreiecks bei . Dieser Ansatz stellt sicher, dass das Dreieck reaktionsfähig bleibt und seine Größe proportional zum Textinhalt und der URL innerhalb des Hyperlinks ändert.

Das obige ist der detaillierte Inhalt vonWie erstelle ich ein responsives prozentuales Dreieck in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!