zoukankan      html  css  js  c++  java
  • 纯 CSS 实现三角形尖角箭头的实例

    上次无意中发现了个使用纯 CSS 实现三角形尖角箭头的方法

    http://blog.csdn.net/zhouzme/article/details/18901943

    ,但没有怎么用上,也没有详细完整的实例,今天刚好要用上,整理了下,写个完整的代码:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style type="text/css">
    .area {
        margin:100px auto;
        300px; 
        height: 150px; 
    }
    .item {
        float:left; clear:both;
        margin-bottom:23px;
    }
    /* 向上的箭头 */
    .dot-top {
        font-size: 0;
        line-height: 0;
        border- 10px;
        border-color: red;
        border-top- 0;
        border-style: dashed;
        border-bottom-style: solid;
        border-left-color: transparent;
        border-right-color: transparent;
    }
    /* 向右的箭头 */
    .dot-right {
        font-size: 0;
        line-height: 0;
        border- 10px;
        border-color: red;
        border-right- 0;
        border-style: dashed;
        border-left-style: solid;
        border-top-color: transparent;
        border-bottom-color: transparent;
    }
    /* 向下的箭头 */
    .dot-bottom {
        font-size: 0;
        line-height: 0;
        border- 10px;
        border-color: red;
        border-bottom- 0;
        border-style: dashed;
        border-top-style: solid;
        border-left-color: transparent;
        border-right-color: transparent;
    }
    /* 向左的箭头 */
    .dot-left {
        font-size: 0;
        line-height: 0;
        border- 10px;
        border-color: red;
        border-left- 0;
        border-style: dashed;
        border-right-style: solid;
        border-top-color: transparent;
        border-bottom-color: transparent;
    }
    </style>
    </head>
                                   
    <body>
    <div class="area">
        <span class="item dot-top"></span>
        <span class="item dot-right"></span>
        <span class="item dot-bottom"></span>
        <span class="item dot-left"></span>
    </div>
    </body>
    </html>

    可以通过设置 border-width 来调整箭头的大小,这样就不需要每次都去做图了,非常方便,颜色可以随时调整,真佩服那位老兄,以前虽然也发现 border 的两边是斜的但没想到可以这样来做尖角箭头,太厉害了

    显示结果图:


  • 相关阅读:
    利用JavaScript数组动态写入HTML数据节点
    个人项目网站,部分截图
    HTML5 JavaScript API
    简述几项关于web应用的开发技术
    最值得学习的编程语言
    使用Ajax与服务器端通信
    Ajax与用户交互的存储格式JSON
    兄弟连教育分享:用CSS实现鼠标悬停提示的方法
    移动端HTML5性能优化
    兄弟连PHP培训教你提升效率的20个要点
  • 原文地址:https://www.cnblogs.com/zhouzme/p/5758527.html
Copyright © 2011-2022 走看看