使用css画出三角形的方法介绍

来源：懂视网责编：小采时间：2020-11-27 18:52:19

使用css画出三角形的方法介绍

使用css画出三角形的方法介绍:看到有面试题里会有问到如何用css画出三角形众所周知好多图形都可以拆分成三角形，所以说会了画三角形就可以画出很多有意思的形状画出三角形的原理是调整border（边框）的四个方向的宽度，线条样式以及颜色。如果你将宽度调的足够大，改变不同方向的颜色，你

推荐度：

点击下载本文 文档为doc格式

导读使用css画出三角形的方法介绍:看到有面试题里会有问到如何用css画出三角形众所周知好多图形都可以拆分成三角形，所以说会了画三角形就可以画出很多有意思的形状画出三角形的原理是调整border（边框）的四个方向的宽度，线条样式以及颜色。如果你将宽度调的足够大，改变不同方向的颜色，你

看到有面试题里会有问到如何用css画出三角形

众所周知好多图形都可以拆分成三角形，所以说会了画三角形就可以画出很多有意思的形状

画出三角形的原理是调整border（边框）的四个方向的宽度，线条样式以及颜色。

如果你将宽度调的足够大，改变不同方向的颜色，你就可以发现盒模型的border是四个梯形一样的线条。

这个时候如果将盒模型内部的height，width调为0px，则三角形就形成了。

border:100px solid transparent 　　//边框100px，实线，透明颜色，下面三行代码等同于此句
border-width:15px;　　　　　　　　//border-width代表所有方向的border
border-style:solid;
border-color:transparent；

如果你看明白了原理那么现在你应该已经可以自己写出代码了。

width: 0;
 height: 0;
 border-left: 50px solid transparent;　　　　//左边宽度50px，实线，透明颜色
 border-right: 50px solid transparent;　　　　//右边同上
 border-top: 100px solid red;　　　　　　　　//上边宽度100px，实线，红色

上面这段代码可以生成一个向下的三角形。如下图所示（为便于理解我替换了右边的颜色）

QQ图片20170320144615.png

由这个效果图我们可以看出，要生成一个三角形我们需要三条边框。

左右边框的高度会决定三角形的高有多长。

三角形高度则由边框自己的宽度决定

那么如何生成一个指向右下或者左下之类的这样的三角呢？

相信大家已经通过上面的图看出来了。

我们只需要两条边框就够了。

width: 0;
height: 0;
border-top: 100px solid red;
border-right: 100px solid transparent;

这段代码就会生成一个指向左下的三角形，底和高都是100px。

还记不记得border-width。

它可以用一句代码定义四条边框的宽度。

使用css画出三角形的方法介绍

推荐度：

点击下载本文 文档为doc格式

标签：方法三角形画出

热门焦点

使用css画出三角形的方法介绍

使用css画出三角形的方法介绍

使用css画出三角形的方法介绍

最新推荐

猜你喜欢

热门推荐