Adobe 风格的箭头标题

Adobe 网站上的模块有一些非常酷的标题栏。标题栏被分成左右两部分。左边是说明性的标题，右边是相关的链接。但让我们从批判的角度来审视他们的做法。

首先，他们使用非精灵图片来实现它

这意味着仅仅为了标题就需要额外的 HTTP 请求。更糟糕的是，:hover 效果是完全独立的图片。这意味着还需要另一个 HTTP 请求，并在第一次悬停时出现“黑屏闪烁”，等待第二张图片加载。

我们可以做到完全不用图片！这是我们的版本

标题的标记只是一个包含链接的标题

<div class="module">
  <h2>Community <a href="#">Blue</a></h2>
  <!-- stuff in module -->
</div>

这是标题的基本设置，链接位于右侧，具有基本颜色，包括由边框创建的白色直线

.module h2 {
	background: #ccc;
	padding: 0 0 0 10px;
	font-size: 16px;

	/* Thickness of the bar more easily achieved with line-height
	   since padding would push link inward.  */
	line-height: 2; 
}
.module h2 a {
	float: right;
	position: relative;
	text-decoration: none;
	color: #333;
	padding: 0 10px;
	border-left: 5px solid white;
}

现在，要在直线中创建箭头，只需要使用 CSS 三角形，并通过 非常有用的伪元素 应用。

.module h2 a:before,
.module h2 a:after {
	content: "";
	position: absolute;
	/* Pushed down half way, will get pulled back up half height of triangle
	   ensures centering if font-size or line-height changes */
	top: 50%;
	width: 0;
	height: 0;
}
.module h2 a:before {
	left: -12px;
	/* Triangle */
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
	border-right: 8px solid white;
	/* Pull-up */
	margin-top: -8px;
}
.module h2 a:after {
	/* Smaller and different position triangle */
	left: -5px;
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
	border-right: 6px solid #a2d6eb;
	margin-top: -6px;
}

我们和他们的一个显著区别是，他们的渐变贯穿整个三角形。对于我们来说，这是不可能的，因为使用 CSS 三角形技术应用渐变并不实用。但这并不意味着渐变不可用，只是你需要确保三角形与主链接连接的部分颜色是实心的。

为了演示页面，我添加了一些不同的颜色、过渡，以及使用双三角形来模拟斜线的示例。

查看演示   下载文件