Wie erstelle ich responsive CSS-Dreiecke mit prozentualer Breite?

Responsive CSS-Dreiecke mit prozentualer Breite generieren

Problem:

Pfeile unten erstellen Elemente, die CSS verwenden, können schwierig sein, da die Rahmenbreiten für den Pfeil nicht in Pixeln festgelegt werden können. Dies macht es schwierig, ein responsives Dreieck zu erreichen.

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

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

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

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

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!