用代码将图片招进现实

今天文字君要给大家讲的是如何用代码来画三角形

先来个图吧

1557474666(1).jpg

嗯~~~你们没有看错,这是一个正方形,我们就是要去取这四个不同颜色的三角形!!!这个图像的效果,我相信哪怕是菜鸟级别的选手都能做出来,所以我也阔以啦

7_D}R$1XG$GF{22RX)PE$LG.png

那接下来,我们要去实现把这四个颜色编程一个三角形颜色怎么做呢?

第一式:

.box{
    width:200px;
    height:200px;
    background-color:green;
    clip-path:polygon(0% 0%,100% 0%,50% 100%);
}

现在就有很多选手就懵了,主要是对我们的clip-path:polygon()属性很陌生,如果是这样,那就要扩大自己的知识面了哦
clip-path这个属性是设置一个剪切路径，而polygon是多边形的意思，clip-path:polygon(0% 0%,100% 0%,50% 100%)就是设置了一个多边形的截切路径，至于(0% 0%,100% 0%,50% 100%)只是代表了三个点，沿着这三个点组成的路径剪切，最终剪出来一个三角形，而剪切路径之外的部分是不可见的。关于这三个点的解析如下图，它是以红色盒子的左上角为原点，沿着原点水平向左作为X轴，沿着原点水平向下作为Y轴，如此形成一个直角坐标系。理论上这种使用clip-path不仅可以在页面中绘制三角形，还可以在页面上绘制任意的多边形。

下载.png

第二式:

我们来用背景图做一个好不好!!!

what???你是要告诉我你准备插入一张三角形的背景图片来做出三角形吗???come on ,当然不会了,接下来咱们用渐变色来做出三角形。首先我们循序渐进的来。先看看下面的代码

.box{
    width:200px;
    height:200px;
    background-image:linear-gradient(red,green)
}

效果图如下：

image.png

根据效果图可以看出盒子的背景从红到绿，是从上向下呈线性渐变的。这边要画个重点，有许多小伙子以为linear-gradient是颜色，但是并不是的，其实它是背景图片。当然现在并没有出现一个三角形，同志们不要着急，咱们看下面的代码。

.box{
    width:200px;
    height:200px;
    background-image:linear-gradient(red 0% red 50%,green 50% green 100%)
}

come on 效果图如下:

image.png

根据咱们所看到的盒子一分为二，上面一半是红色，下面一半是绿色，至于说为什么会出现这种效果呢？其实linear-gradient(red 0% red 50%,green 50% green 100%)就是在竖直方向各个颜色所占的比例，废话多说无益，直接上图，这边要画个重点，在下图中你可以看到在红色和绿色交界的位置，存在着红色和绿色，所以在那个位置是代表了 red 50% green 50%

image.png

当然在上图中，依旧找不到任何关于三角形的影子，不过不要慌，接下来再看一下linear-gradient的另外一个参数。咱们先看下面的代码

.box{
    width:200px;
    height:200px;
    background-image:linear-gradient(90deg,red 0%,red 50%,green 50%,green 100%)
}

效果如下图所示：

image.png

乍一看，貌似和上图没有多大的变化，但是你仔细观察，能够发现盒子的背景从红到绿，是从左向右呈线性渐变的，而造成这种变化的原因，不过就是我们多设置了一个90deg,这个其实就是现在要讨论的linear-gradient的另外一个参数角度值，至于说角度值到底是如何作用的，老规矩，话不多说，直接看图。

image.png

这是linear-gradient(0deg,red 0%,red 50%,green 50%,green 100%)

image.png

这是linear-gradient(90deg,red 0%,red 50%,green 50%,green 100%)

image.png

这是linear-gradient(180deg,red 0%,red 50%,green 50%,green 100%)

观察上面的三张图，发现当角度值设置为0deg时，渐变的方向指向上边，当角度值设置为90deg时，渐变的方向指向右边，当角度值设置为180deg时，渐变的方向指向下边,其实你可以理解为角度值的变化是顺时针旋转的。那既然角度值可以设置0deg 90deg 180deg 这样类似的角度值，咱们是不是可以设置45deg呢，当然是可以的，先不要慌，看一下下面的代码。

.box{
    width:200px;
    height:200px;
    background-image:linear-gradient(45deg,red 0%,red 50%,green 50%,green 100%)
}

come on 接下来 三角形，千呼万唤始出来，效果如下图所示：

image.png

(⊙o⊙)…是不是有的小伙伴就懵了,那行吧,我们再来几手最简单的操作.

第三式

不说了,直接上代码

GQE1P~0`}JOGJ`MH9DF0}H0.png

怎么会如此简单

10D15690.gif

欢迎前端爱好者加入我们七天学习周计划,一起讨论前端知识,可以进群领取更多有趣代码 962386996