纯 HTML/CSS 在按钮下创建三角形指针答案

【问题标题】：Pure HTML/CSS to create triangle pointer under button纯 HTML/CSS 在按钮下创建三角形指针
【发布时间】：2018-05-08 19:28:46
【问题描述】：

目前我有一个看起来像这样的 div：

我需要编辑 HTML/CSS 以使其显示如下，下方有一个小三角形。理想情况下，我想使用纯 HTML 和 CSS 来做到这一点，没有图像文件。根据CSS-Tricks可以做到。

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：

#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;
}

JSFiddle

如果有人能帮我做到这一点，我将不胜感激！

【问题讨论】：

标签： html css

【解决方案1】：

用http://cssarrowplease.com/处的箭头生成你自己的div

你可以随意配置它，成为一个干净的 CSS

它是如何工作的：
让我们用这种技术创建一个非常简单的三角形：

.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: "";
}

&lt;div class="container"&gt;&lt;/div&gt;

重要的是我们应用边框的伪元素的height: 0; & width: 0。所以你可以想象一个没有大小的元素。这就是边界的起源。所以边框的每一边都是一个三角形（尝试用不同的颜色为每一边着色以理解它）。
因此，要创建“单个三角形”效果，只需在边框上应用透明颜色并为要显示的三角形着色即可。

替代方案：CSS Clip-Path

您现在可以使用带有 CSS 的新 clip-path 非常轻松地创建一个矩形。请注意浏览器支持。像往常一样，IE 和遗憾的是 Edge 都不会像 Opera Mini 一样支持它：Can I Use

快速示例：

.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>

所以现在你只需要 1 行。不错，不是吗？

【讨论】：

是的，一个很棒的网站。我也用过但完全忘记了:)
如果箭头出现在其他东西上（在垂直 ul 的顶部 li 上），您需要向箭头添加高 z-index。
很棒的网站，但我真的很想知道 div 是如何以箭头结尾的。是因为负/正边距吗？箭头的形状是什么？
@gideon：添加了解释。如果我有什么不清楚的地方，请随时再次询问。
谢谢迈克尔。我在 jsfiddle 上玩过一次就知道了。

【解决方案2】：

这称为“标注”。

这里有一些例子：

http://cssdeck.com/labs/bv45bh6p（一些例子）

http://mrcoles.com/blog/callout-box-css-border-triangles-cross-browser/（解释其工作原理）

【讨论】：