Bagaimana untuk menulis segitiga dalam CSS

Segitiga penulisan CSS

/* create an arrow that points up */
div.arrow-up {
 width:0px;
 height:0px;
 border-left:5px solid transparent; /* left arrow slant */
 border-right:5px solid transparent; /* right arrow slant */
 border-bottom:5px solid #2f2f2f; /* bottom, add background color here */
 font-size:0px;
 line-height:0px;
}

/* create an arrow that points down */
div.arrow-down {
 width:0px;
 height:0px;
 border-left:5px solid transparent;
 border-right:5px solid transparent;
 border-top:5px solid #2f2f2f;
 font-size:0px;
 line-height:0px;
}

/* create an arrow that points left */
div.arrow-left {
 width:0px;
 height:0px;
 border-bottom:5px solid transparent; /* left arrow slant */
 border-top:5px solid transparent; /* right arrow slant */
 border-right:5px solid #2f2f2f; /* bottom, add background color here */
 font-size:0px;
 line-height:0px;
}

/* create an arrow that points right */
div.arrow-right {
 width:0px;
 height:0px;
 border-bottom:5px solid transparent; /* left arrow slant */
 border-top:5px solid transparent; /* right arrow slant */
 border-left:5px solid #2f2f2f; /* bottom, add background color here */
 font-size:0px;
 line-height:0px;
}

Atas ialah kandungan terperinci Bagaimana untuk menulis segitiga dalam CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!