利用border制作三角形原理
2018-06-24 00:57:33来源：未知 阅读 ()
网站前端页面中，有时候会使用一些三角形，除了使用图片的方式之外，利用css的border属性也可以做出相对应的三角形。那么，利用border是如何实现三角形的制作的呢？
先看下面一个例子：
CSS代码：
width:100px; height:100px; border-top: solid 100px blue; border-left: solid 100px black; border-right: solid 100px yellow; border-bottom: solid 100px red;
运行结果：
通过显示的结果可以看到边框的相交的地方都形成45°平分，那么，当元素的宽高都设置为0的时候会是什么样子呢？
代码：
width: 0; height: 0; border-top: solid 100px blue; border-left: solid 100px black; border-right: solid 100px yellow; border-bottom: solid 100px red;
运行结果：
这样，我们就看到了四个等边的三角形。那么，我们想要的是一个三角形，该怎么办呢？试想一下，假如我们去除一条边之后，会变成什么样子呢？
代码：
width: 0; height: 0; border-left: solid 100px black; border-right: solid 100px yellow; border-bottom: solid 100px red;
运行结果：
这次，我们看到了三个三角形，假如我们把黑色和黄色都换成透明的会不会就剩下一个红色的等边三角形了呢？
代码：
width: 0; height: 0; border-left: solid 100px transparent; border-right: solid 100px transparent; border-bottom: solid 100px red;
运行结果：
很显然，三角形出现了。我们可以再试着修改一下border的宽度或者隐藏其他的边，就可以得到不同的三角形了。
代码：
width: 0; height: 0; border-left: solid 100px transparent; border-right: solid 100px transparent; border-bottom: solid 50px red;
运行结果：
代码：
width: 0; height: 0; border-top: solid 100px transparent; border-bottom: solid 100px transparent; border-left: solid 150px black;
运行结果：
代码：
width: 0; height: 0; border-top: solid 100px transparent; border-left: solid 150px black;
运行结果：
总结：可以通过移除一条或两条边框，设置相应边框透明，实现三角形的制作，可以变换多样，更多例子不再列举。
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
下一篇：微信小程序 引用其他js里的方法
- 使用 Apache SSI(Server Side Includes) 制作多语言版静态网 2020-06-01
- 3.border和background 2020-05-18
- 13.制作一个直角三角形 2020-04-17
- 9.使用CSS样式，自己制作单选框样式和选中功能 2020-04-11
- 利用css 实现 视觉差效果 2020-04-09
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
