纯CSS箭头,气泡

来源：互联网发布：mac口红专柜多少钱一支编辑：程序博客网时间：2024/05/01 12:51

原文地址: CSS Triangles

演示地址：CSS Triangles Demo

[plain] view plaincopy
本文两种实现方式: 使用或不使用 before 和 :after 伪元素(伪类,pseudo-elements)  

最近重新设计了我的网站，准备添加tooltips提示信息效果.实现很容易，但我想要让提示功能具有三角形的指示图标。
当我重新思考想要所设计的每个图标颜色都随心所欲的时候，采用图片那就是一场灾难。

幸运的是, MooTools 的核心开发者 Darren Waddell介绍了一个强大的技巧给我：CSS三角形.只使用纯CSS语言，你就能创建兼容各个浏览器的三角形，用很少的代码。

最终效果如下图所示:

效果图

不使用伪类的 CSS 代码如下:

[css] view plaincopy
/* 向上的箭头,类似于A,只有三个边，不能指定上边框 */  
div.arrow-up {  
    width: 0;   
    height: 0;   
    border-left: 5px solid transparent;  /* 左边框的宽 */  
    border-right: 5px solid transparent; /* 右边框的宽 */  
    border-bottom: 5px solid #2f2f2f; /* 下边框的长度|高,以及背景色 */  
    font-size: 0;  
    line-height: 0;  
}  
  
/* 向下的箭头 类似于 V */  
div.arrow-down {  
    width: 0;   
    height: 0;   
    border-left: 20px solid transparent;  
    border-right: 20px solid transparent;  
    border-top: 20px solid #f00;  
    font-size: 0;  
    line-height: 0;  
}  
  
/* 向左的箭头: 只有三个边：上、下、右。而 <| 总体来看，向左三角形的高=上+下边框的长度。 宽=右边框的长度 */  
div.arrow-left {  
    width: 0;   
    height: 0;   
    border-bottom: 15px solid transparent;  /* 下边框的高 */  
    border-top: 15px solid transparent; /* 上方边框的高 */  
    border-right: 10px solid yellow; /* 右边框的长度|宽度，以及背景色 */  
    font-size: 0;  
    line-height: 0;  
}  
  
/* 向右的箭头: 只有三个边：上、下、左。而 |> 总体来看，向右三角形的高=上+下边框的长度。 宽=左边框的长度 */  
div.arrow-right {  
    width: 0;   
    height: 0;   
    border-bottom: 15px solid transparent;  /* 下边框的高 */  
    border-top: 15px solid transparent; /* 上方边框的高 */  
    border-left: 60px solid green; /* 左边框的长度|宽度，以及背景色 */  
    font-size: 0;  
    line-height: 0;  
}  

其中的秘密，就是这些三角形在你要指向的方向垂直的两边, 有巨大的边框,而让背面的边框设置为你喜欢的颜色即可。
边框越大，三角形就越大。调整三个边框的长度，就可以构建出各种不同的三角形。如果加上旋转，不知道似的否可以指定各种不同方向的图形?
当然，这个处理方法优越的地方就在于代码量非常少，同时非常灵活。

带有 :before 和 :after 的CSS三角形
前面的例子可以很好的工作，但是如果你想要不只是一个三角形怎么办？比如气泡对话框，那么可以使用伪类来实现CSS三角形箭头，对于弹出的提示信息来说非常完美，代码如下：

[css] view plaincopy
div.tooltip {  
    /* tooltip content styling in here; nothing to do with arrows */  
}  
  
/* shared with before and after */  
div.tooltip:before, div.tooltip:after {  
    content: ' ';  
    height: 0;  
    position: absolute;  
    width: 0;  
    border: 10px solid transparent; /* arrow size */  
}  
  
/* 向上的箭头 */  
/* top-stacked, smaller arrow */  
div.tooltip:before {  
    border-bottom-color: #fff;  /* arrow color */  
  
    /* positioning */  
    position: absolute;  
    top: -19px;  
    left: 255px;  
    z-index: 2;  
}  
  
/* arrow which acts as a background shadow */  
div.tooltip:after {  
    border-bottom-color: #333;  /* arrow color */  
  
    /* positioning */  
    position: absolute;  
    top: -24px;  
    left: 255px;  
    z-index: 1;  
}  

一般来说在箭头的背面边框指定颜色，也可以只使用 :before 或者 :after 之中的一个。而第二个箭头，可以被当作背景边框，或者作为第一个的阴影。
我想问自己为什么不早点知道这种技术。这个优雅的技巧肯定会让我在将来大大的提高制作tooltip元素的水平，同时也为我打开了一个广阔的视野。

完整的页面示例代码如下：

[html] view plaincopy
<!DOCTYPE html>  
<html xmlns="http://www.w3.org/1999/xhtml"  dir="ltr">  
<head>    <title>CSS 箭头Demo</title>  
  
    <style type="text/css">  
        /* 向上的箭头,类似于A,只有三个边，不能指定上边框 */  
        div.arrow-up {  
            width: 0;   
            height: 0;   
            border-left: 5px solid transparent;  /* 左边框的宽 */  
            border-right: 5px solid transparent; /* 右边框的宽 */  
            border-bottom: 5px solid #2f2f2f; /* 下边框的长度|高,以及背景色 */  
            font-size: 0;  
            line-height: 0;  
        }  
          
        /* 向下的箭头 类似于 V */  
        div.arrow-down {  
            width: 0;   
            height: 0;   
            border-left: 20px solid transparent;  
            border-right: 20px solid transparent;  
            border-top: 20px solid #f00;  
            font-size: 0;  
            line-height: 0;  
        }  
          
        /* 向左的箭头: 只有三个边：上、下、右。而 <| 总体来看，向左三角形的高=上+下边框的长度。 宽=右边框的长度 */  
        div.arrow-left {  
            width: 0;   
            height: 0;   
            border-bottom: 15px solid transparent;  /* 下边框的高 */  
            border-top: 15px solid transparent; /* 上方边框的高 */  
            border-right: 10px solid yellow; /* 右边框的长度|宽度，以及背景色 */  
            font-size: 0;  
            line-height: 0;  
        }  
          
        /* 向右的箭头: 只有三个边：上、下、左。而 |> 总体来看，向右三角形的高=上+下边框的长度。 宽=左边框的长度 */  
        div.arrow-right {  
            width: 0;   
            height: 0;   
            border-bottom: 15px solid transparent;  /* 下边框的高 */  
            border-top: 15px solid transparent; /* 上方边框的高 */  
            border-left: 60px solid green; /* 左边框的长度|宽度，以及背景色 */  
            font-size: 0;  
            line-height: 0;  
        }  
  
        /* 基本样式 */  
        .tip {  
            background: #eee;  
            border: 1px solid #ccc;  
            margin-left: 30px;  
            padding: 30px;  
            border-radius: 8px;  
            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);  
            position: relative;  
            width: 200px;  
        }  
  
        /* 箭头 - :before and :after, 一起组成了好看的气泡小箭头 */  
        .tip:before {  
            position: absolute;  
            display: inline-block;  
            border-top: 17px solid transparent;  
            border-right: 17px solid #eee;  
            border-bottom: 17px solid transparent;  
            border-right-color: rgba(0, 0, 0, 0.2);  
            left: -18px;  
            top: 40px;  
            content: '';  
        }  
  
        /* 背景阴影*/  
        .tip:after {  
            position: absolute;  
            display: inline-block;  
            border-top: 16px solid transparent;  
            border-right: 16px solid #eee;  
            border-bottom: 16px solid transparent;  
            left: -16px;  
            top: 41px;  
            content: '';  
        }  
    </style>  
</head>  
<body>  
  
<div id="contentHolder">  
    <h1>CSS 箭头Demo</h1>  
    <p>以下代码.是极好的纯 CSS 箭头样式，不使用背景图!</p>  
    <div id="position:relative;">  
        <div class="arrow-up">向上的箭头</div>  
        <br />  
        <div class="arrow-down">向下的箭头</div>  
        <br />  
        <div class="arrow-left">向左的箭头</div>  
        <br />  
        <div class="arrow-right">向右的箭头</div>  
    </div>  
      
    <h2>CSS 箭头气泡 ，使用 伪类(Pseudo-Element)</h2>  
    <div style="position:relative;">  
        <div class="tip">  
            企业级开发首选技术是什么？JavaEE和.Net哪个技术更好？在JavaEE开发中主要用哪些框架？另外在移动大热的趋势下如何开发出一个成功的Android产品？  
        </div>  
        <br/>  
        <div class="tip">  
            向左的箭头: 只有三个边：上、下、右。而 < | 总体来看，向左三角形的高=上+下边框的长度。 宽=右边框的长度<br />  
            向右的箭头: 只有三个边：上、下、左。而 |> 总体来看，向右三角形的高=上+下边框的长度。 宽=左边框的长度<br />  
            向上的箭头,类似于A,只有三个边，不能指定上边框   
        </div>  
    </div>  
</div>  
</body>  
</html>  

0 0