#学习笔记#(43)CSS-border绘制三角形

来源：互联网发布：紫菜三角梅淘宝店铺编辑：程序博客网时间：2024/06/14 11:01

代码示例如下

<!DOCTYPE html><html><head><meta charset="UTF-8"/><style>.up-triangle{width:0px;height:0px;border-bottom:30px solid #000;border-left:15px solid transparent;border-right:15px solid transparent;margin:100px auto;}.down-triangle{width:0px;height:0px;border-top:30px solid #000;border-left:15px solid transparent;border-right:15px solid transparent;margin:100px auto;}.left-triangle{width:0px;height:0px;border-right:30px solid #000;border-top:15px solid transparent;border-bottom:15px solid transparent;margin:100px auto;}.right-triangle{width:0px;height:0px;border-left:30px solid #000;border-top:15px solid transparent;border-bottom:15px solid transparent;margin:100px auto;}</style></head><body><div class="up-triangle"></div><div class="down-triangle"></div><div class="left-triangle"></div><div class="right-triangle"></div></body></html>

0 0