zoukankan      html  css  js  c++  java
  • 【css】纯 css 制作带三角(border篇)

    以前写过一篇纯CSS制作带三角的边框,那篇文章是用HTML特殊字符来制作三角的,今天介绍下,如何用 border 来制作三角。

    html 代码如下:

    <div class="arrow-up"></div>
    <div class="arrow-down"></div>
    <div class="arrow-left"></div>
    <div class="arrow-right"></div>

    css 代码如下:

    .arrow-up {
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        _border-left: 5px solid white;
        _border-right: 5px solid white;
        border-bottom: 5px solid black;
        overflow:hidden;
    }
    .arrow-down {
        width: 0;
        height: 0;
        border-left: 20px solid transparent;
        border-right: 20px solid transparent;
        _border-left: 20px solid white;
        _border-right: 20px solid white;
        border-top: 20px solid #f00;
        overflow:hidden;
    }
    
    .arrow-right {
        width: 0;
        height: 0;
        border-top: 60px solid transparent;
        border-bottom: 60px solid transparent;
        _border-top: 60px solid white;
        _border-bottom: 60px solid white;
        border-left: 60px solid green;
        overflow:hidden;
    }
    .arrow-left {
        width: 0;
        height: 0;
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
        _border-top: 10px solid white;
        _border-bottom: 10px solid white;
        border-right:10px solid blue;
        overflow:hidden;
    }

    效果图如下:

    测试浏览器:chrome,firefox,ie8,ie7,ie6,safari,opera

    PS:

    1、原文并没有兼容 ie6 浏览器,所以我改了下,现在的版本已经可以兼容所有浏览器了。

    2、相对于用 border 来做三角,我更加喜欢用 html 特殊字符来制作三角。

    原文地址:http://www.w3cplus.com/code/303.html

  • 相关阅读:
    移动端轮播图实现
    iterator
    Promise对象和运算符
    xshell报错:The remote SSH server rejected X11 forwarding request. Last login: Fri Dec 2
    linux平台运行jmeter
    linux基础命令
    APP登录之后会将PC的登录信息踢掉
    测试中遇到支付的一个小问题
    谷歌浏览器css不支持12px以下的
    spring setter注入
  • 原文地址:https://www.cnblogs.com/yjzhu/p/2970824.html
Copyright © 2011-2022 走看看