css画三角形

大概是最细致的css画三角形的教程了。almost最细致。
网页制作过程中,有时候我们需要制作一些小三角之类的家伙来充门面,比方说下图中的小家伙,初出茅庐想搞出这么个家伙来真的很是苦恼,所以,有了这篇文章。看完之后,各种三角形分分钟手到擒来,出不来算我输。

《css画三角形》 隐藏着黑暗力量的小三脚形哦,请赋予我没有bug的力量吧

废话到此,开始实操

第一步 先祭出你的div

随便的编辑器新建个html的页面直接在body里面随手写个<div class="test"></div>
然后在body中加个

<style>
.test{  
        width: 0px;
        height: 0px;
        border-color: transparent black;
        border-style: solid;
        border-width: 100px 100px 0px 0px;
    }
</style>

先别急,复制进去,咱们一点点分析这段话是怎么来的。
首先粘贴完成保存打开浏览器一口气下来就会看到这么个黑家伙。

《css画三角形》 黑黑的三角形

这时候这位看官就要问了:敢问这个黑家伙是怎么来的呢?

这位看官问的好,咱们一步一步把他搞出来看看。

首先,咱们先试试看,将这个div盒子的
width
height都给丫设置出来。让丫藏起来,弄出来打一顿。再给丫加个边框,弄他100像素,一个小胖子从此诞生。

代码如下:

<style>
.test{  
        width: 10px;
        height: 10px;
        border-style: solid;
        border-width: 100px 100px 100px 100px;
    }
</style>

这时候就考察眼力了。这里有个知识点。盒子的边框不是直线,而是一个一个的梯形。下图中有4个梯形,你找到了吗?

《css画三角形》 请找到四个梯形

现在咱们将这个胖家伙的三个边框通过修改颜色透明隐藏掉,看看你找对梯形了没有。
代码又如下:

<style>
.test{  
        width: 10px;
        height: 10px;
        border-style: solid;
        border-width: 100px 100px 100px 100px;
        border-color: transparent transparent transparent black;
    }
</style>

代码保存之后成了这样:

《css画三角形》 一个小山丘

原来是四个边框,现在只剩下下边框。为什么呢?因为“上右下左”的顺序,我们将“上右左”边框的颜色设置成了transparent,透明的。

《css画三角形》 原来是这样的四个梯形

它已经很接近三角形了,怎么让它成三角形呢?目前这种情况,干掉div的宽度就可以了。

代码又又又如下:

<style>
.test{  
        width: 0px;
        height: 10px;
        border-style: solid;
        border-width: 100px 100px 100px 100px;
        border-color: transparent transparent transparent black;
    }
</style>

如图

《css画三角形》 山头被削尖了

同理,我们目前已经可以做出四种三角形了。但是这还不过瘾。因为还有本文首图这种三角形存在:

《css画三角形》 惊世骇俗的小直角

没想到按照教程做了半天不是这位直角三角大哥,敢问这大哥又是怎么来的呢?

这时候我们就可以对比目前的代码和本文首图配套的代码了。我们修改了
border-width的值。依旧是“上右下左”的顺序,但是这里的上右下左是指的div到边框最外边的距离。也就下图所示的这个距离。虽然div宽度没了,但是它还应该存在我们的心里。原点一般的重要角色。

依旧是代码:

<style>
    .test{
        margin: 0 auto;
        width: 0px;
        height: 10px;
        border-style: solid;
        border-width: 0px 0px 100px 100px;
        border-color: transparent transparent black transparent;
    }
</style>

《css画三角形》 距离产生美

这时候细心的你又发现问题了,为啥这段代码跟文章一开始的代码不同?

因为我们切的是不一样的位置,但是出现的是同种三角形。聪明的你去尝试修改
border-width
border-color找到真理吧。

愿春节将近,不用加班。

第二步 懒得写就用生成器生成吧

没有彩蛋怎么算过年,附上一枚懒人神奇,一秒钟出三角形,堪比渣渣辉:
css三角形生成器

不要骂我,学习使我快乐。

    原文作者:code_monkey
    原文地址: https://www.jianshu.com/p/e58f50911aa9
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞