首页 > 代码库 > 详解css绘制三角形
详解css绘制三角形
1.首先画一个div，给固定宽高
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Trangle</title> <style> div{ width: 100px; height: 100px; background-color: red; } </style></head><body><h3>三角形</h3><div></div></body></html>
2.给div加上边框顺序为上，右，下，左
div{ width: 100px; height: 100px; background-color: red; border-top:50px solid mediumpurple; border-right: 50px solid blue; border-bottom: 50px solid green; border-left: 50px solid saddlebrown; } 
3.去掉div的宽度和高度
div{ width: 0px; height: 0px; background-color: red; border-top:50px solid mediumpurple; border-right: 50px solid blue; border-bottom: 50px solid green; border-left: 50px solid saddlebrown; }
4.简化代码
div{ width: 0px; height: 0px; border-width: 50px 50px 50px 50px; border-color: red transparent; border-style: solid; } 
5.最后把下边框去掉
div{ width: 0px; height: 0px; border-width: 50px 50px 0px 50px; border-color: red transparent; border-style: solid; } 
详解css绘制三角形
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。