纯css创建图形 发表于 2018-08-21 | 分类于 css 用css创建三角形 保证元素是块级元素 设置元素的边框 不需要显示的边框使用透明色 1234567div{ width:0; height:0; margin:0 auto; border:6px solid transparent; border-top: 6px solid red; } 用css创建等腰梯形梯形的下底宽度为矩形“左右边框”的宽度加上矩形的宽度,上底的宽度等于矩形的宽度,梯形的高度为下边框的宽度。 12345678910111213141516171819<!DOCTYPE html><html><head><meta charset="utf-8" /><title>测试</title><style type="text/css">div { width:120px;height:0;margin:100px auto; border-left:80px solid transparent; border-right:80px solid transparent; border-bottom:150px solid #8900CE;}</style></head><body><div></div></body></html> 用css创建上底在下方的直角梯形123456789101112131415161718<!DOCTYPE html><html><head><meta charset="utf-8" /><title>测试</title><style type="text/css">div { width:120px;height:0;margin:100px auto; border-left:80px solid transparent; border-top:150px solid #00C1AE;}</style></head><body><div></div></body></html> 用css创建六边形12345678910111213141516171819202122232425<!DOCTYPE html><html><head><meta charset="utf-8" /><title>测试</title><style type="text/css">.div1 { width:160px;height:0;margin:100px auto 0 auto; border-left:75px solid transparent; border-right:75px solid transparent; border-bottom:135px solid #53CC62;}.div2 { width:160px;height:0;margin:0px auto; border-left:75px solid transparent; border-right:75px solid transparent; border-top:135px solid #53CC62;}</style></head><body><div class="div1"></div><div class="div2"></div></body></html>