zoukankan      html  css  js  c++  java
  • 用CSS绘制箭头等三角形图案 [译]

    最近重新设计了我的网站,准备添加tooltips提示信息效果.实现很容易,但我想要让提示功能具有三角形的指示图标。
    当我重新思考想要所设计的每个图标颜色都随心所欲的时候,采用图片那就是一场灾难。
    幸运的是, MooTools 的核心开发者 Darren Waddell介绍了一个强大的技巧给我:CSS三角形.只使用纯CSS语言,你就能创建兼容各个浏览器的三角形,用很少的代码。
    不使用伪类的 CSS 代码如下:

    /* 向上的箭头,类似于A,只有三个边,不能指定上边框 */
    div.arrow-up {
    	 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 {
    	 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 {
    	 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 {
    	 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三角形箭头,对于弹出的提示信息来说非常完美,代码如下:

    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;
    	 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元素的水平,同时也为我打开了一个广阔的视野。

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

    <!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 {
    			 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 {
    			 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 {
    			 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 {
    			 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;
    			padding: 10px;
    			border-radius: 8px;
    			box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    			position: relative;
    			 200px;
    		}
    
    		/* 箭头 - :before and :after, 一起组成了好看的气泡小箭头 */
    		.tip:before {
    			position: absolute;
    			display: inline-block;
    			border-top: 7px solid transparent;
    			border-right: 7px solid #eee;
    			border-bottom: 7px solid transparent;
    			border-right-color: rgba(0, 0, 0, 0.2);
    			left: -8px;
    			top: 20px;
    			content: '';
    		}
    
    		/* 背景阴影*/
    		.tip:after {
    			position: absolute;
    			display: inline-block;
    			border-top: 6px solid transparent;
    			border-right: 6px solid #eee;
    			border-bottom: 6px solid transparent;
    			left: -6px;
    			top: 21px;
    			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>
    

    原文地址:http://davidwalsh.name/css-triangles

    演示地址:http://davidwalsh.name/demo/css-triangles.php

  • 相关阅读:
    staticmethod classmethod
    Cache Buffer 区别
    Apache 各启动方式的差别
    网段,掩码
    容器镜像国内下载加速----借助阿里
    import 本质
    数字签名证书的事儿
    java中的sql语句中如果有like怎么写
    VMware+centos7克隆多个虚拟机
    使用Ajax轮询模拟简单的站内信箱(消息管理)功能
  • 原文地址:https://www.cnblogs.com/ilian/p/css-sanjiaoxing.html
Copyright © 2011-2022 走看看