Probleme auf Dreiecke mit CSS machen grenzt

Question

Ich habe gerade einen Pfeil in CSS mit diesem Code machen:

 .icon{ 
 
      height: 0; 
 
      width: 0; 
 
      border: solid transparent; 
 
      border-width: 10px; 
 
      border-left-color: aquamarine; 
 
      border-top-color: saddlebrown; 
 
      border-right-color: salmon; 
 
      border-bottom-color: steelblue; 
 
     }

<div class="icon"></div>

richtige Dreiecke:

und die Ergebnis war 4 richtige Dreiecke aber wenn ich das benutze der gleiche code in irgendwo anders das ergebnis ist wie pic unter, dass die division box width und höhe ist nicht das gleiche.

falsche Dreiecke:

Answer 1

Sie sollten nur Wtih Positions arbeiten, die die width und height Werke machen ...

Answer 2

versuchen, diese Kurzschrift-Code. ändern Sie einfach Ihre Farbe/Stil/Breite der Grenze nach Ihren Wünschen.

.icon{ 
    border-color: yellow blue red green; 
    border-style: solid; 
    border-width: 200px 200px 200px 200px; 
    height: 0px; 
    width: 0px; 
} 

Answer 3

Entfernen Sie die padding Sie an anderer Stelle gesetzt haben, bedeutet

.icon{ 
    ... 
    padding: 0; 
    ... 
}