div+CSS实现三角形

来源:互联网 发布:华为游戏防御矩阵 编辑:程序博客网 时间:2024/05/16 14:53
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style type="text/css">div{width: 0;height: 0;border-bottom: 10px solid white;border-top: 10px solid red;border-left: 10px solid white;border-right: 10px solid white;}</style></head><body><div></div></body></html>


只要将其他边的颜色设置为白色,就可以实现三角形

border-top:朝下的三角形
border-bottom:朝上的三角形
border-left:朝右的三角形
border-right:朝左的三角形

0 0
原创粉丝点击