三角形制作原理

最新推荐文章于 2018-01-25 11:55:00 发布

Renkx0404

最新推荐文章于 2018-01-25 11:55:00 发布

阅读量492

点赞数

本文链接：https://blog.csdn.net/Renkx0404/article/details/73505768

版权

<!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;
     }

这里写图片描述

Renkx0404

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
三角形制作原理

<!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;
复制链接

扫一扫