三角形 css_CSS三角形

三角形 css

This post has been updated to include CSS triangles without markup via :before and :after pseudo-elements.

这篇文章已经更新，包括通过:before和:after伪元素的没有标记CSS三角形。

I was recently redesigning my website and wanted to create tooltips.  Making that was easy but I also wanted my tooltips to feature the a triangular pointer.  I'm a disaster when it comes to images and the prospect of needing to make an image for every color tooltip I wanted made me rethink my redesign.  Lucky for me, MooTools Core Developer Darren Waddell shared with me a great trick:  CSS triangles.  Using pure CSS you can create cross-browser compatible triangles with very little code!

我最近正在重新设计网站，并希望创建工具提示。 做到这一点很容易，但是我也希望工具提示具有三角形指针。 当谈到图像时，我真是个灾难，而我想要为每个色彩工具提示制作图像的前景使我重新考虑了重新设计。 对我来说很幸运，MooTools核心开发人员Darren Waddell与我分享了一个绝妙的技巧：CSS三角形。 使用纯CSS，您只需很少的代码即可创建跨浏览器兼容的三角形！

View Demo 观看演示

CSS (The CSS)

/* create an arrow that points up */
div.arrow-up {
	width: 0; 
	height: 0; 
	border-left: 5px solid transparent;  /* left arrow slant */
	border-right: 5px solid transparent; /* right arrow slant */
	border-bottom: 5px solid #2f2f2f; /* bottom, add background color here */
	font-size: 0;
	line-height: 0;
}

/* create an arrow that points down */
div.arrow-down {
	width: 0; 
	height: 0; 
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 5px solid #2f2f2f;
	font-size: 0;
	line-height: 0;
}

/* create an arrow that points left */
div.arrow-left {
	width: 0; 
	height: 0; 
	border-bottom: 5px solid transparent;  /* left arrow slant */
	border-top: 5px solid transparent; /* right arrow slant */
	border-right: 5px solid #2f2f2f; /* bottom, add background color here */
	font-size: 0;
	line-height: 0;
}

/* create an arrow that points right */
div.arrow-right {
	width: 0; 
	height: 0; 
	border-bottom: 5px solid transparent;  /* left arrow slant */
	border-top: 5px solid transparent; /* right arrow slant */
	border-left: 5px solid #2f2f2f; /* bottom, add background color here */
	font-size: 0;
	line-height: 0;
}

The secret to these triangles is creating giant borders to the two perpendicular sides of the direction you'd like the triangle to point. Make the opposite side's border the same size with the background color of whatever color you'd like the tooltip to be.  The larger the border, the larger the triangle.  You can color your triangles any color, any size, and in any direction. The best part is that there's very little code needed to achieve this effect.

这些三角形的秘诀是在您希望三角形指向的方向的两个垂直边上创建巨大的边界。 使用您希望工具提示显示的任何颜色的背景颜色，使另一边的边框大小相同。 边框越大，三角形越大。 您可以为三角形上任何颜色，任何大小和任何方向的颜色。 最好的部分是，实现此效果所需的代码很少。

CSS三角形，带有:before和:after (CSS Triangles with :before and :after)

The CSS examples above uses true elements but what if you don't want to add single triangles? CSS triangles can be created with pseudo-elements; this is the perfect case for tooltips. Here's how you can do so:

上面CSS示例使用true元素，但是如果您不想添加单个三角形怎么办？ 可以使用伪元素创建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;
	width: 0;
	border: 10px solid transparent; /* arrow size */
}

/* these arrows will point up */

/* 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;
}

The border side you add the color to is the opposite side of the arrow pointer. Also not that you don't need to use both :before and :after pseudo-elements -- you need only use one. The second arrow could, however, be used as a background shadow or background "border".

向其添加颜色的边框是箭头指针的另一侧。 同样不是您不需要同时使用:before和:after伪元素-您只需要使用一个即可。 但是，第二个箭头可以用作背景阴影或背景“边框”。

View Demo 观看演示

I don't know how I didn't know about this technique sooner!  This neat trick will surely help me in the future and opens up a world of possibilities for me to improve existing tooltip elements.

我不知道我怎么不早知道这种技术！ 这个巧妙的技巧必将在将来对我有所帮助，并为我改善现有工具提示元素提供了无限可能。

翻译自: https://davidwalsh.name/css-triangles

三角形 css