Verwenden Sie CSS, um Dreiecke zu erstellen

HTML-Code:

CSS-Code:

.div{
border-top:40px solid #ff0077;
border-left:40px solid #004444;
border-bottom:40px solid #999999;
border-right:40px fest #333333;
Höhe: 0px;
Breite: 0px;
}

Wirkung:

Jetzt schlüsseln Sie es einzeln auf

HTML-Code:

CSS-Code:

.triggle-top,.triggle-left,.triggle-bottom,.triggle-right{
border:100px solid transparent;
height: 0;
width: 0;
}
.triggle-top{
border-top-color:#ff0077;
}
.triggle-left{
border-left-color:#004444;
}
.triggle-bottom{
border-bottom-color: #999999;
}
.triggle-right{
border-right-color: #333333;
}

Rendering:

Kurz gesagt: Das kleine Dreieck wird mithilfe des Randattributs erstellt

Extra:

Und was ich sagen möchte, ist ein allgemeiner Tag wie:

Diese Löschung von x kann mit:after{content:'x'🎜> erreicht werden