zoukankan      html  css  js  c++  java
  • 通过CSS的border绘制三角形

    通过css的border 可以绘制出三角形, 不同的样式组合,有着不同的效果,可以控制它的大小,颜色,方向。看下面各种图形,相信可能还有很多图形,大家都没见过。

    先写出公共的样式:

    1 .border {
    2     width: 0;
    3     height: 0;
    4     
    5     border-color: transparent;
    6     border-width: 1rem;
    7     border-style: solid;
    8 }

    在上面的css基础上,添加下面的组合代码,将可以控制三角形的方向:

    1 border-left-color: #000;

    qq%e6%88%aa%e5%9b%be20160913160720

    1 border-right-color: #000;

    qq%e6%88%aa%e5%9b%be20160913160755

    1 border-top-color: #000;

    qq%e6%88%aa%e5%9b%be20160913160824

    1 border-bottom-color: #000;

    qq%e6%88%aa%e5%9b%be20160913160841

    1 border-left-color: #000;
    2 border-bottom-color: #000;

    qq%e6%88%aa%e5%9b%be20160913160859

    1 border-right-color: #000;
    2 border-bottom-color: #000;

    qq%e6%88%aa%e5%9b%be20160913161235

    1 border-right-color: #000;
    2 border-top-color: #000;

    qq%e6%88%aa%e5%9b%be20160913161246

    1 border-left-color: #000;
    2 border-top-color: #000;

    qq%e6%88%aa%e5%9b%be20160913161302

    1 border-top-color: #000;
    2 border-bottom-color: #000;

    qq%e6%88%aa%e5%9b%be20160913161504

    1 border-left-color: #000;
    2 border-right-color: #000;

    qq%e6%88%aa%e5%9b%be20160913161517

    1 border-top-color: #000;
    2 border-left-color: #000;
    3 border-bottom-color: #000;

    qq%e6%88%aa%e5%9b%be20160913161314

    1 border-top-color: #000;
    2 border-left-color: #000;
    3 border-right-color: #000;

    qq%e6%88%aa%e5%9b%be20160913161326

    1 border-bottom-color: #000;
    2 border-left-color: #000;
    3 border-right-color: #000;

    qq%e6%88%aa%e5%9b%be20160913161415

    1 border-top-color: #000;
    2 border-right-color: #000;
    3 border-bottom-color: #000;

    qq%e6%88%aa%e5%9b%be20160913161447

    还有下面的这个效果,

    1 border-left-color: #000;
    2 border-right-color: #000;
    3 border-left- 3rem;

    qq%e6%88%aa%e5%9b%be20160913161537

    不同的组合产生不同的效果,大家可以尝试各种组合带来的效果。

  • 相关阅读:
    网络流 讲解
    二分图判定 【模板】
    POJ——T3352 Road Construction
    shell脚本编写-自动部署及监控
    万能头文件
    1284 2 3 5 7的倍数(容斥原理)
    1289 大鱼吃小鱼(栈)
    1305 Pairwise Sum and Divide(数学 ,规律)
    博客达人
    Prim算法---最小生成树
  • 原文地址:https://www.cnblogs.com/front-end-1149980941/p/5885628.html
Copyright © 2011-2022 走看看