HTML+CSS写一个三角形（原理+实例）

来源：互联网发布：怎么用c语言控制机器人编辑：程序博客网时间：2024/06/14 09:28

写之前，首先要了解其中的原理

html代码只需创建两个名为triangle、triangle-left的div盒子即可，
代码：

<body>    <div id="triangle"></div><br /><br /><br />    <div id="triangle-left"></div></body>

在triangle.html文件中，下面代码及其实现后的效果图如下：

#triangle{    margin-top:50px;    width: 100px;    height: 100px;    border-top:100px solid red;    border-right:100px solid blue;    border-bottom:100px solid green;    border-left:100px solid orange;}

图：

实现出现三角形的效果，可以将div盒子宽高都设为0px，上面图就会变成四个三角形组成的一个正方形，再通过设置边框宽度以及颜色等，就能实现一个三角形
代码：

#triangle-left {    width: 0px;     height: 0px;     border-top: 50px solid transparent;    border-right: 100px solid red;    border-bottom: 50px solid transparent;}

三角形效果图：

阅读全文

0 0