CSS画三角形

来源：互联网发布：淘宝p2p 编辑：程序博客网时间：2024/06/05 04:54

将元素的width和height设置为0。设置border的left，right，top，bottom值。

transparent：透明。

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>CSS画三角形</title><style>#top{                       width: 0px;                       height: 0px;                       border-left:50px solid transparent;                       border-top:50px solid red;                       border-right:50px solid transparent;}#left{width: 0px;height: 0px;border-left:50px solid blue;border-top:50px solid transparent;border-bottom:50px solid transparent;}#bottom{width: 0px;height: 0px;border-left:50px solid transparent;border-bottom:50px solid green;border-right:50px solid transparent;}#right{width: 0px;height: 0px;                        border-right:50px solid purple;border-top:50px solid transparent;border-bottom:50px solid transparent;}#all{width: 0px;height: 0px;                        border-right:50px solid purple;border-top:50px solid red;border-bottom:50px solid green;border-left:50px solid blue;}</style></head><body><div id="top"></div><div id="left"></div><div id="bottom"></div><div id="right"></div><div id="all"></div></body></html>

0 0