CSS Quick Tip

CSS Quick Tip: CSS Arrows and Shapes Without Markup

Often it's useful to show an arrow or some sort of contextual indication of what element something is related to. We see this frequently with tooltips that use arrows to point to the item that is triggering them.
经常用箭头提示来做上下文说明。
Usually, however, adding in this arrow has a cost, both in markup and in CSS, which forces people who do not wish to use this style to not only compensate for this extra markup by hiding it from display, but also in the actual weight of the page for the markup of each arrow. The cost is even higher if you use an image to display this arrow, because there is the extra overhead of the data that needs to be transferred (and possibly an extra request if the treatment is not sprited).
但是在标记中和css中增加这种箭头会带来额外代价....如果我们用图片展示这个箭头，代价会比我们相信的更高。因为...
Today I'm going to show you a way to add in these visual hints without having to create any markup. We use this technique inside of Liferay and AlloyUI for our tabs system. We had a legacy set of tabs we needed to style that support having the tabs live separately in the markup from the section they're logically related to, which makes it very difficult to visually indicate relationship. For instance, you can't put a border around both the tab section and the tabs, because they don't share a common parent.
现在我要通过一种不使用标记的方式来增加这种虚拟的提示。我们在liferay和alloyUI中使用这种技术。
Instead, we had to come up with some other way to indicate that the selected tab related to the currently displayed section. The other challenge was that each tab item needed to share the same markup and css structure as the AlloyUI tabview where they do share a common parent.
我们用其他方法来表明与展示区域相关的选中的tab.另一个问题是每一个条目需要分享相同的标记和css结构。
So we didn't want to add in custom markup to show visual relationship for one set of tabs vs. another.
所以我们不想增加一个自定义标记的比较去展示一个tab集合和另一个的虚拟关系。
This technique builds on one that has been discussed by the Filament Group and expertly pioneered by Tantek ?elik (whom we had the pleasure of seeing at this year's YUIConf 2010).
这个技术建立在Filament group讨论和Tanek Celik成熟开发的基础之上。
I'll quickly cover the concept of what we'll be doing.
接下来，我快速的讲一下整体概念。
The root concept is creating polygonal shapes using very large borders. The way this is done is by setting the width and height of an element to 0, and setting a large border on the element. At the corner of a element's border, a natural shape is created. By selectively setting different sides of the border color to transparent, we can create different shapes.
基础该你是用边框创建一个多边形。通过在元素上设置宽高为0和巨大边框来实现。元素的边框的角会自然形成一个形状。通过选择性的设置不同边的颜色透明度，我们能创建出不同的形状。

Generating CSS Content

CSS allows us to generate content using a property called, appropriately enough, "content". However, we can only use this property using the :after or :before pseudo-elements, and we're somewhat limited on what we can insert (we can't insert more HTML for instance).

CC允许我们通过一个content属性来生成内容。但是，我们只能用after和before属性伪类元素，我们从某种程度上被限制了我们能插入的内容。
What's cool about this though is that with the content we insert, we can style it as if it is an element. This means we can transform it into a polygonal shape. And because the :after and :before pseudo-elements insert after or before the content of our element (and not outside of the element), we can move it around and position it relative to our element. From there we can use it as a contextual pointer.
然而很酷的是我们可以给我们插入的内容设置样式，就像他是一个元素。这意味着我们能够把它变成一个多边形。因为:after和:before是一个在我们的元素之前或之后的伪类元素，而不是之外的元素，所以我们能够来回挪动他，并相对于我们的元素进行定位。这样我们能够把它当做一个上下文的指示器使用。

Let's go through the code.
First, our HTML:

Let's style our box to look like a box:

#demo {
	background-color: #333;
	height: 100px;
	position: relative;
	width: 100px;
}

首先我们写个box
You'll notice that we set position to relative. This is to allow us to set our pointer to absolute and have it stay relative to our box.
你会注意到我们设置了定位方式为相对定位。这样允许在我们的盒子里设置pointer为绝对定位。
Now, let's go ahead and insert the base styling for our pointer:

#demo:after {
	content: ' ';
	height: 0;
	position: absolute;
	width: 0;
}

现在来让我们为pointer设置基本的 样式
You'll notice a few things. One, we inserted just a blank space, which is enough to give us a handle to style. Second, we're setting position to absolute so we can move the pointer where we want in relation to box.
你会注意到几个事情:1.我们插入了一个空格，使我们能够处理样式。2.我们设置定位方式为绝对定位，这样我们能够把pointer移动到我们相对定位的盒子的任意位置。

Now, here is the code to style the pointer to look like a shape:

#demo:after {
	content: ' ';
	height: 0;
	position: absolute;
	width: 0;

	border: 10px solid transparent;
	border-top-color: #abcdef;
}

现在就能够获得一个形状

Now, to top it off, let's go ahead and position the pointer around the box. Since our relative parent is our #demo element, our coordinates are relative to it's coordinates. It's also important to mention that the dimension of our pointer is controlled by the border width. So the overall width of our pointer in this case is 20px (one sloping side is 10px and the other sloping side is the other 10px).
现在，让他从顶部移下来，我们把移到盒子周围。因为他的父元素是我们的#demo元素，我们的坐标是相对于他的坐标。上面提到的我们的point的面积是由边框宽度控制的也很重要，那么这种情况下我们的pointer总宽度是20px.

So let's say we want to use the arrow to make the box look like a comment or tooltip, we would place it on the bottom and move it a few pixels in.

#demo:after {
	...previous code...

	top: 100%;
	left: 10px;
}

那么我们想让这个箭头使这个盒子看起来像一个注释，或者提示。我们把它放到底部或者并偏移几个像素。
Which makes our box look like this:
使我们的盒子看起来这个样子

... ...
剩下内容不再翻译，因为剩下的都是举一反三的。
http://yuiblog.com/blog/2010/11/22/css-quick-tip-css-arrows-and-shapes-without-markup/

来自 “ ITPUB博客 ” ，链接：http://blog.itpub.net/26614996/viewspace-1495050/，如需转载，请注明出处，否则将追究法律责任。

转载于:http://blog.itpub.net/26614996/viewspace-1495050/