利用边框制作三角形

来源：互联网发布：软件部署实施方案编辑：程序博客网时间：2024/06/01 07:12

不说话，直接上代码

<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style type="text/css">span{display: block;}#box1{width: 0px;height: 0px;border: 20px solid transparent;border-bottom:20px solid blue;}#box2{width: 0px;height: 0px;border: 20px solid transparent;border-top:20px solid blue;}#box3{width: 0px;height: 0px;border: 20px solid transparent;border-left:20px solid red;}#box4{width: 0px;height: 0px;border: 20px solid transparent;border-right:20px solid red;}#box5{width: 0px;height: 0px;border: 20px solid transparent;border-top:20px solid red;border-left:20px solid red;}#box6{width: 0px;height: 0px;border: 20px solid transparent;border-bottom:20px solid red;border-left:20px solid red;}#box7{width: 0px;height: 0px;border: 20px solid transparent;border-top:20px solid red;border-right:20px solid red;}#box8{width: 0px;height: 0px;border: 20px solid transparent;border-bottom:20px solid red;border-right:20px solid red;}</style></head><body>上三角：<span id="box1"></span>下三角：<span id="box2"></span>左三角：<span id="box3"></span>右三角：<span id="box4"></span>左上角：<span id="box5"></span>左下角：<span id="box6"></span>右上角：<span id="box7"></span>右下角：<span id="box8"></span></body></html>

阅读全文

0 0