Wie erstelle ich responsive CSS-Dreiecke mit prozentualer Breite?

Lösung:

Um ein responsives Dreieck mit CSS zu erstellen, können Sie ein verzerrtes und gedrehtes Pseudo verwenden Element.

Implementierung:

1. Erstellen Sie einen äußeren Container:

   .btn {
     position: relative;
     display: inline-block;
     width: 100px;  /* Set a fixed width for demonstration purposes */
     height: 50px;
   }

   Nach dem Login kopieren

2. Fügen Sie die hinzu Dreieck:

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

   Nach dem Login kopieren

Responsive Version:

Um das Dreieck responsiv zu machen, ändern Sie den äußeren Container und die Dreiecksstile wie folgt :

1. Responsive Container:

   .btn {
     position: relative;
     display: inline-block;
     width: 50%;  /* Set a percentage width for responsiveness */
     height: 50px;
   }

   Nach dem Login kopieren

2. Responsives Dreieck:

   .btn:after {
     top: 50px;  /* Adjust the top position */
     background-color: inherit;
     padding-bottom: 50%;
     width: 57.7%;
     transform-origin: 0 0;
     transform: rotate(-30deg) skewX(30deg);
   }

   Nach dem Login kopieren

Hinweis: Die padding-bottom-Eigenschaft behält das Seitenverhältnis des Dreiecks bei. Durch das Entfernen der Breite in .btn kann die Form ihre Größe basierend auf ihrem Inhalt anpassen.

Diese CSS-Implementierung erstellt ein Dreieck mit einer prozentualen Breite, das sein Seitenverhältnis beibehält und seine Größe basierend auf den Abmessungen des Containers anpasst .

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