Wie erstelle ich ein responsives CSS-Dreieck mit prozentualer Breite?

Erstellen eines responsiven CSS-Dreiecks mit prozentualer Breite

Der unten bereitgestellte Code generiert einen Pfeil, der unter einem element:

.btn {
    position: relative;
    display: inline-block;
    width: 100px;
    height: 50px;
    text-align: center;
    color: white;
    background: gray;
    line-height: 50px;
    text-decoration: none;
}
.btn:after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 0;
    height: 0;
    border-width: 10px 50px 0 50px;
    border-style: solid;
    border-color: gray transparent transparent transparent;   
}

Diese Methode erfordert jedoch die Angabe der Linkbreite, um die richtige Größe des Pfeils sicherzustellen. Um dieser Einschränkung zu begegnen, können wir einen reaktionsfähigen Ansatz verwenden, der ein verzerrtes und gedrehtes Pseudoelement verwendet:

.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);
}

Dieser Ansatz stellt sicher, dass das Dreieck sein Seitenverhältnis mit der Eigenschaft „padding-bottom“ beibehält. Durch das Entfernen der width-Eigenschaft in der .btn-Klasse kann das Dreieck seine Größe entsprechend seinem Inhalt anpassen, sodass es vollständig reagiert.

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