三角形制作原理

来源：互联网发布：淘宝店铺怎样使用seo 编辑：程序博客网时间：2024/06/01 09:26

<!DOCTYPE html><html><head>  <meta charset="utf-8">  <meta http-equiv="X-UA-Compatible" content="IE=edge">  <title>The triangulation principle</title>  <style>    .triangle{      width: 0;      height: 0;     //这里的height可以不设置，但是width必须设为0；一般情况宽和高都会设置为0；      border-top: 100px solid blue;      border-right: 100px solid yellow;      border-bottom: 100px solid green;      border-left: 100px solid red;    }   </style></head><body>  <div class="triangle"></div>  <hr>  <div class="triangulation1"></div>  <hr>  <div class="triangulation2"></div></body></html>

制作三角形的其实很简单，首先定义一个没有宽和高的div，然后将设置一个border-width;依次按照上右下左顺序给border设置颜色，如图所示；
这里写图片描述
从上图来看，例如我们想得到红色的三角形，那么只需要将其他颜色的三角形屏蔽或者是隐藏就可以得到。用transparent 使其三角形透明

 <style>    .triangulation1{      width: 0;      height: 0;      border-top: 100px solid transparent ;      border-right: 100px solid transparent ;      border-left: 100px solid red;      border-bottom: 100px solid transparent ;    }  </style>

这里写图片描述
这边的如果想改变三角形的形状可以改变上面border中的数值NUM1;
上面提到依次上右下左顺序，这里有一个简单制作三角形的方法。

.triangulation2{      width: 0;      height: 0;      border-width: 100px;      border-style: dashed dashed dashed solid;      border-color: transparent transparent transparent red;     }

这里写图片描述

阅读全文

0 0