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

    http://www.cnblogs.com/front-end-1149980941/p/5885628.html

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

    先写出公共的样式:

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

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

    1 border-left-color: #000;

    1 border-right-color: #000;

    1 border-top-color: #000;

    1 border-bottom-color: #000;

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

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

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

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

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

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

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

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

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

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

    还有下面的这个效果,

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

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

     
    分类: css3
  • 相关阅读:
    工作流系统中的语法标记系统
    通用附件管理功能改善
    规范数据库表字段大小写 小写字段名全部更改为大写
    Enterprise Solution 虚拟测试环境
    解析大型.NET ERP系统 查找与钻取
    Linux:FHS标准
    Linux:修改和删除已有变量
    分布式系统:高性能系统设计原则
    CAP:Alantany 谈 CAP
    Javascript:自己写模板引擎
  • 原文地址:https://www.cnblogs.com/libin-1/p/5888495.html
Copyright © 2011-2022 走看看