<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <style type="text/css"> div{ margin:0 auto; margin-bottom: 10px; } #triangle-up{ width:0; height:0; border-left:80px solid transparent; border-right:80px solid transparent; border-bottom:100px solid blue; } #triangle-right{ width:0; height:0; border-top:80px solid transparent; border-bottom:80px solid transparent; border-left:100px solid blue; } #triangle-left{ width:0; height:0; border-top:80px solid transparent; border-bottom:80px solid transparent; border-right:100px solid blue; } #triangle-down{ width:0; height:0; border-left:80px solid transparent; border-right:80px solid transparent; border-top:100px solid blue; } #triangle-up-left{ width:0; height:0; border-top:100px solid orange; border-right:100px solid transparent; } #triangle-up-right{ width:0; height:0; border-top:100px solid orange; border-left:100px solid transparent; } #triangle-down-left{ width:0; height:0; border-bottom:100px solid orange; border-right:100px solid transparent; } #triangle-down-right{ width:0; height:0; border-bottom:100px solid orange; border-left:100px solid transparent; } </style> </head> <body> <div id="triangle-up"></div> <div id="triangle-down"></div> <div id="triangle-left"></div> <div id="triangle-right"></div> <div id="triangle-up-left"></div> <div id="triangle-down-right"></div> <div id="triangle-up-right"></div> <div id="triangle-down-left"></div> </body> </html>
html6 border border-width border-style border-color CSS三角形,布布扣,bubuko.com