【人生第一篇博客】 --带小三角div框的实现

本人小php程序员（实习）一枚，目前公司里的活比较清闲（主要是因为技术不到家，干不了大活，捂脸），所以决定可以学习一下前端知识，毕竟不会前端的php不是好美工。

对于前端，本人了解的甚少，之前也学过不少，然而却总是学过用过之后就忘了。过了几天干脆把自己学过啥也给忘了。因此，萌生了写下博客来记录学习的过程。

第一次写博客，语言表达可能有些混乱（自己都有点看不下去了），也不多说了，下面开始上内容。

2017年1月10日，没啥活干，于是想着去慕课网上找找视频学习一点新姿势（没错我是慕粉），偶然间看到了下面这个东西：⬇️⬇️

一个可爱的小箭头。

有点前端基础的都知道，很多页面布局都是DIV+CSS，那么div是如何实现上面这种样式的呢？本人立刻觉得可以尝试制作一下（不要嘲笑我，我只是一个前端渣 = =）。

于是说干就干，开始动手研究。

大家都知道，css里的border属性，可以设置div等元素的边框，那么上面的小三角看起来像是通过对border属性进行一系列样式操作得到的。那么是否如此呢？尝试了一下，结果发现，不论对border怎么设置，都无法达到以上的效果，我可以画个半圆，可以画个整圆，就是画不出三角形。

于是开始查阅css手册（开始涨姿势了！），发现了还有其他的边框属性，border-left ; border-right ; border-top ; border-bottom;

原来可以单独给每个边框设置属性值。

于是高高兴兴的去试了一下：

  .con{
            width: 300px;
            height: 300px;
            border: 1px solid #ccc;
            margin: 50px auto;
        }
 .arrow{
            border-bottom: 10px solid blue;
            border-right: 10px solid #ccc;
            border-left: 10px solid yellow;
            border-top: 10px solid red;
        }

<div class="con">
    <div class="arrow"> </div>
</div>

结果：

额，这是什么鬼？？我要的箭头呢。。

又是一番查询，原来div要取消宽高才行。于是给div设置宽高为0，得到下面结果：

哈，看到三角形了！那么接下来只要修改一下颜色，调整一下定位就OK了：

  .con{
            width: 300px;
            height: 300px;
            border: 1px solid #ccc;
            margin: 50px auto;
        }

        .arrow{
            border-bottom: 10px solid #ccc;
            border-right: 10px solid #fff;
            border-left: 10px solid #fff;
            border-top: 10px solid #fff;
            width: 0px;
            height: 0px;
            position: absolute;
            top:-20px;
            left:10px;
        }

<div class="con">
    <div class="arrow"> </div>
</div>

得到以下结果：

可爱的小三角就出现了。虽然是很简单的一个小实现，但这见证了我第一次使用博客来记录自己的学习过程，这是人类的一小步，却是我个人的一大步！

相信我以后一定（应该）可以坚持下去的（吧...）！

PS：后来去看了慕课上的实现，发现慕课上是通过伪元素实现的。也很简单，只要把相应的arrow类div删除，将原来的arrow样式改成如下：

        .con:before{
            content: '';
            display: block;
            border-bottom: 10px solid #ccc;
            border-right: 10px solid #fff;
            border-left: 10px solid #fff;
            border-top: 10px solid #fff;
            width: 0px;
            height: 0px;
            position: absolute;
            top:-20px;
            left:10px;
        }