美工统筹SEO，为企业电子商务营销助力！
用CSS3绘制三角形的简略体例
一佰互联网站建造(www.taishanly.com) 宣布日期 2020-04-21 17:24:58 阅读数: 138
操纵CSS的border和它的属性值transparent来完成三角形,此中最首要的是要大白因为div的高度跟宽度都为0，margin，padding也为0，以是元素框的巨细便是他的border的叠加，因为相邻boder会堆叠，故存在内容宽高时实在肆意一边存在的border都是梯形的，当div内容宽高为0时，border就表现为三角形，将四个border的色彩设置为transparent表现边框通明，而将右侧框色彩再设置为白色就发明三角形显现了，实在这个三角形是右侧框。
CSS Code复制内容到剪贴板- <!DOCTYPE html>
- <html>
- <body>
- <style>
- #triangle-up {
- width: 0px;
- height: 0px;
- border: 100px solid transparent;
- border-right: 100px solid red;
- }
- </style>
- <div id="triangle-up"></div>
- </body>
- </html>
图解
一般的框模子，div的内容width和height均为50px.黑线划出来的地区便是它的右侧框，显现为一个梯形
CSS Code复制内容到剪贴板- <!DOCTYPE html>
- <html>
- <body>
- <style>
- #triangle-up {
- width: 50px;
- height: 50px;
- border: 100px solid red;
- border-bottom: 100px solid red;
- }
- </style>
- <div id="triangle-up"></div>
- </body>
- </html>
当div的内容width和height均为0.黑线划出来的地区便是它的右侧框，显现为一个三角形
CSS Code复制内容到剪贴板- <!DOCTYPE html>
- <html>
- <body>
- <style>
- #triangle-up {
- width: 0px;
- height: 0px;
- border: 100px solid red;
- }
- </style>
- <div id="triangle-up"></div>
- </body>
- </html>
当div的内容width和height均为0.高低左侧框都为通明的时辰，只要右侧框显现为白色，三角形就看到了
CSS Code复制内容到剪贴板- <!DOCTYPE html>
- <html>
- <body>
- <style>
- #triangle-up {
- width: 0px;
- height: 0px;
- border: 100px solid transparent;
- border-right: 100px solid red;
- }
- </style>
- <div id="triangle-up"></div>
- </body>
- </html>
连系css其余特点定能做出更风趣的一些结果！
TAG标签： 用CSS3绘制三角形的简略体例
一佰互联是天下着名建站品牌办事商,咱们有九年、网站建造、网页设想、php开辟和域名注册及假造主机办事经历，供给的办事更是天下着名。最近几年来还整合团队上风自立开辟了可视化多用户”“3.0平台版，拖拽排版网站建造设想，轻松完成pc站、手机微网站、小法式、APP一体化全网营销网站扶植 ，已胜利的为天下上百家收集公司供给自助建站平台搭建办事。
