如何最好地创建这个箭头形状的 div/按钮？答案

【问题标题】：How best to create this arrow shaped div/button?如何最好地创建这个箭头形状的 div/按钮？
【发布时间】：2019-05-02 19:40:53
【问题描述】：

Stack 上的第一篇文章。我被要求为一个项目重新创建此设计，但我不完全确定如何最好地使用带箭头的底部重新创建此 div/按钮。

我对大多数 CSS 约定相当满意，但对于像这样的自定义样式，我有点迷失了起点。如果有人能指出我正确的方向，我将不胜感激。

非常感谢，内森

【问题讨论】：

嗨！在此站点上，我们要求您至少先尝试自己解决问题。因为这个问题太宽泛了。尝试自己解决这个问题，当你遇到问题时，将你的代码添加为minimal reproducible example，并详细解释什么不是你想要的。
嗨 - 谢谢 - 我不一定在寻找解决方案，也许更多的是关于一些属性的建议，因为我已经做了一些广泛的谷歌搜索并且不能真的找到与此匹配的任何内容...
寻找 CSS 形状，或者这个 generator 你可以使用它们。也许这个also

标签： html css sass

【解决方案1】：

.button
{
    position: relative;
    background-color: rgb(128,250,128);
    padding: 10px 0px;
    width: 60px;
    text-align: center;
}
.button::after
{
    display: block;
    position: absolute;
    bottom: -10px;
    content: "";
    width: 0px;
    border-color: rgb(128,250,128) transparent;
    border-style: solid;
    border-width: 10px 30px 0px 30px; /*10 is the height and 30 is half of parent width*/
}

<div class="button">
  button
<div>

【讨论】：

【解决方案2】：

这是你需要的 CSS 来制作一个向下倾斜的 div/button：

.menu {
  background-color: #0b0;
  border: 1px solid #000;
  float: left;
  height: 50px;
  line-height: 50px;
  margin: 0;
  position: relative;
  text-align: center;
  width: 150px;
}
.menu.active {
background-color: #0d0;
}
.menu.active::after {
  border-top: 10px solid #0d0;
  border-left: 75px solid transparent;
  border-right: 75px solid transparent;
  bottom: -10px;
  content: "";
  left: 0;
  position: absolute;
}
.menu.active::before {
  border-top: 10px solid #000;
  border-left: 75px solid transparent;
  border-right: 75px solid transparent;
  bottom: -11px;
  content: "";
  left: 0;
  position: absolute;
}

<div class="menu">
  HOME
</div>
<div class="menu active">
  MORE REVIEWS
</div>
<div class="menu">
  ABOUT
</div>

【讨论】：

欢迎@Nathan