css+div打造三角形(箭头)

本文章转自:https://www.cnblogs.com/MirageFox/p/5877599.html

 

 

在很多网站都见过这样的箭头,之前我一直以为是图片,直到今天才知道原来可以用css做。开始看代码没太看懂,后来自己试了几遍才恍然大悟。贴出来分享下。(大神请直接忽略)

先看代码:

 

.sanjiao{
    width:0px;
    height:0px;
    overflow:hidden;
    border-width:10px;
    border-color:transparent transparent blue transparent;
    border-style:dashed dashed solid dashed;
}

 

 

咋一看我确实没明白原因。(看懂的后面可以忽略)

*****************************************************************************************************************

一步步分析:

1、画div

.sanjiao{
    width:30px;
    height:30px;
    background-color:black;
}

2、给边框,分开给

.sanjiao{
    width:30px;
    height:30px;
    background-color:black;

    border-top:solid red 20px;
    border-left:solid blue 20px;
    border-bottom:solid yellow 20px;
    border-right:solid green 20px;
}

(相信聪明的童靴马上就看明白了,我也是在这才明白)

3、去掉中间的div

.sanjiao{
    width:0;
    height:0;

    border-top:solid red 20px;
    border-left:solid blue 20px;
    border-bottom:solid yellow 20px;
    border-right:solid green 20px;
}

(是不是已经看懂了)

4、优化代码

.sanjiao{
    /* 设定div大小 */
    width:0;
    height:0;
    /* 防溢出,稳固兼容性 */
    overflow:hidden;
    /* 箭头尺寸 */
    border-width:10px;
    /* 给箭头着色,四个值分别是边框的四个方向,箭头的方向正好相反 */
    border-color:blue transparent transparent transparent;
    /* 为了兼容性,最好把四个值都补上,需要的方向设实线,其他方向虚线 */
    border-style:solid dashed dashed dashed;
}

搞定,最后的优化注释已经很详细了。

你可能感兴趣的:(CSS)