纯 HTML/CSS 在按钮下创建三角形指针
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18208839/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Pure HTML/CSS to create triangle pointer under button
提问by jskidd3
Currently I have a div that looks like this:
目前我有一个看起来像这样的 div：
I need to edit the HTML/CSS so that it displays like this with a small triangle underneath. Ideally, I would like to do this using purely HTML and CSS, no image files. According to CSS-Tricksit can be done.
我需要编辑 HTML/CSS，使其像这样显示，下面有一个小三角形。理想情况下，我想使用纯 HTML 和 CSS，没有图像文件来做到这一点。根据CSS-Tricks可以做到。
HTML:
HTML：
<ul id="nav">
<li class="active"><a href="#"><div class="triangle"></div>Dashboard</a></li>
<li><a href="users/index.html"><div class="triangle"></div>Manage Users</a></li>
<li><a href="tickets/index.html"><div class="triangle"></div>Manage Tickets</a></li>
<li><a href="reports/index.html"><div class="triangle"></div>Reports</a></li>
</ul>
CSS:
CSS：
#nav {
float: right;
margin: 0;
padding: 8px 0 0 0;
list-style: none;
display: inline-block;
}
#nav li {
float: left;
padding: 7px 5px;
margin: 0 5px;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
border-radius: 7px;
}
#nav li a {
color: #0b70cc;
text-decoration: none;
padding: 7px 5px;
}
#nav li.active a {
color: #ffffff;
}
#nav li.active {
background-color: #0b70cc;
color: white;
}
If anyone can help me do this I'd really appreciate it!
如果有人能帮助我做到这一点，我将不胜感激！
回答by Michael Schmidt
Generate your own div with an arrow at http://cssarrowplease.com/
在http://cssarrowplease.com/用箭头生成你自己的 div
You can configure it like you want and become a clean CSS
你可以随心所欲地配置它并成为一个干净的 CSS
How it works:
Lets' create a very simple triangle with this technique:
工作原理：
让我们用这种技术创建一个非常简单的三角形：
.container {
position: relative;
display: block;
width: 120px;
height: 50px;
background: blue;
}
.container:after{
position: absolute;
bottom: 0;
height: 0;
width: 0;
left: 50%;
border: 40px solid transparent;
border-bottom-color: red;
content: "";
}<div class="container"></div>The important thing is height: 0;& width: 0of the pseudo-element where we apply the border. So you can imagine an element of no size. And this is the origin of the border. So each side of the border is a triangle (try colorize each side in a different color to understand it).
So to create the "single triangle" effect, just apply a transparent color to the border and colorize the triangle you want to display.
重要的是我们应用边框的伪元素的height: 0;& width: 0。所以你可以想象一个没有大小的元素。这就是边界的起源。所以边框的每一边都是一个三角形（尝试用不同的颜色为每一边着色以理解它）。
因此，要创建“单三角形”效果，只需将透明颜色应用于边框并为要显示的三角形着色。
Alternative: CSS Clip-Path
替代方案：CSS 剪辑路径
You can create a rectangle now very easy with the new clip-pathwith CSS.
Just watch out for the browser-support. As usual, IE & sadly Edge both won't support it as well as Opera Mini: Can I Use
您现在可以clip-path使用 CSS的新功能非常轻松地创建矩形。请注意浏览器支持。像往常一样，IE 和可悲的是 Edge 都不会像 Opera Mini 一样支持它：我可以使用吗
Quick Example:
快速示例：
.new_way {
position: relative;
margin: 100px auto;
background: #88b7d5;
width: 100px;
padding: 20px;
text-align: center;
}
.new_way::after {
content: '';
position: absolute;
top: 100%;
left: calc(50% - 10px);
background: #88b7d5;
width: 20px;
height: 20px;
/* The points are: (left top: x y, right top: x y, center bottom: x y) */
clip-path: polygon(0 0, 100% 0, 50% 100%);
}<div class="new_way">
Clip Path
</div>So now you only need 1 line. Nice, isn't it?
所以现在你只需要 1 行。不错，不是吗？
回答by keaukraine
This is called "callout".
这称为“标注”。
Here are some examples:
这里有些例子：
http://cssdeck.com/labs/bv45bh6p(some examples)
http://cssdeck.com/labs/bv45bh6p（一些例子）
http://mrcoles.com/blog/callout-box-css-border-triangles-cross-browser/(with explanation of how it works)
http://mrcoles.com/blog/callout-box-css-border-triangles-cross-browser/（解释它是如何工作的）
