Wie erstelle ich ein responsives CSS-Dreieck mit Prozentsätzen?

Responsives CSS-Dreieck mit prozentualer Breite

Der folgende CSS-Code erstellt einen Pfeil direkt 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;   
}

Dieser Ansatz erfordert jedoch die Angabe der Breite des Links, um die gewünschte Pfeilgröße zu erreichen. Um ein responsives Dreieck zu erstellen, das basierend auf der Breite des Links skaliert, verwenden Sie den folgenden Code:

.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 Code verwendet ein geneigtes und gedrehtes Pseudoelement, um ein Dreieck zu erstellen, das sein Seitenverhältnis basierend auf dem des Links beibehält Höhe. Wenn Sie möchten, dass sich die Größe des Dreiecks an seinen Inhalt anpasst, entfernen Sie die Breite aus der .btn-Klasse.

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