用CSS怎么写出一个三角形

效果：代码：<!DOCTYPE><html><head><meta content="text/html; charset=utf-8" http-equiv="Content-Type"><title>三角形</title><style>*{ margin:0;padding:0;}/*向上*/.triangle_border_up{ width:0; height:0; border-width:0 30px 30px; border-style:solid; border-color:transparent transparent #333;/*透明透明灰*/ margin:40px auto; position:relative;}.triangle_border_up span{ display:block; width:0; height:0; border-width:0 28px 28px; border-style:solid; border-color:transparent transparent #fc0;/*透明透明黄*/ position:absolute; top:1px; left:-28px;}/*向下*/.triangle_border_down{ width:0; height:0; border-width:30px 30px 0; border-style:solid; border-color:#333 transparent transparent;/*灰透明透明 */ margin:40px auto; position:relative;}.triangle_border_down span{ display:block; width:0; height:0; border-width:28px 28px 0; border-style:solid; border-color:#fc0 transparent transparent;/*黄透明透明 */ position:absolute; top:-29px; left:-28px;}/*向左*/.triangle_border_left{ width:0; height:0; border-width:30px 30px 30px 0; border-style:solid; border-color:transparent #333 transparent transparent;/*透明灰透明透明 */ margin:40px auto; position:relative;}.triangle_border_left span{ display:block; width:0; height:0; border-width:28px 28px 28px 0; border-style:solid; border-color:transparent #fc0 transparent transparent;/*透明黄透明透明 */ position:absolute; top:-28px; left:1px;}/*向右*/.triangle_border_right{ width:0; height:0; border-width:30px 0 30px 30px; border-style:solid; border-color:transparent transparent transparent #333;/*透明透明透明灰*/ margin:40px auto; position:relative;}.triangle_border_right span{ display:block; width:0; height:0; border-width:28px 0 28px 28px; border-style:solid; border-color:transparent transparent transparent #fc0;/*透明透明透明黄*/ position:absolute; top:-28px; left:-29px;}</style></head><body><div class="triangle_border_up"> <span></span></div> <div class="triangle_border_down"> <span></span></div> <div class="triangle_border_left"> <span></span></div> <div class="triangle_border_right"> <span></span></div></body></html>

用CSS怎么写出一个三角形

2回答