如何在矩形中制作底部箭头孔[重复]答案

【问题标题】：How to make a bottom arrow hole in a rectangle [duplicate]如何在矩形中制作底部箭头孔[重复]
【发布时间】：2021-05-02 17:00:35
【问题描述】：

我想更改我网站上的按钮。像这样。

但我不知道如何更改此按钮的底部样式。我听说我们可以使用 '::after' 或 '::before' 来做到这一点。

【问题讨论】：

Kevin Powell 在这里解释了如何制作相同的形状。你会在这里找到答案youtube.com/watch?v=QY7Rj8aZcZk&t=980s

标签： css

【解决方案1】：

这样的事情是 100 个选项之一

.my-special-thing {
   position: relative;
   padding: 20px 30px;
   background-color: orange;
   display: inline-block;
}

.my-special-thing:before {
   position: absolute;
   right: 30px;
   bottom: -10px;
   width: 20px;
   height: 20px;
   content: '';
   display: block;
   background-color: white;
   transform: rotate(45deg);
}

&lt;div class="my-special-thing"&gt;Post a job&lt;/div&gt;

【讨论】：

【解决方案2】：

是的，这可以使用 before & after 来实现，请检查下面的代码

.Box {
    width: 200px;
    height: 50px;
    background-color: #F7E6D2;
    display:flex;
    justify-content: center;
    align-items:center;
}
.Box::before {
    bottom: 0;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(0, 0, 0, 0);
    border-bottom-color: #F4F4F5;
    border-width: 11px;
    margin-left: -11px;
}
.Box::after{
    bottom: 0;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(255, 255, 255, 0);
    border-bottom-color: #ffffff;
    border-width: 10px;
    margin-left: -10px;
}

<section id="Items">
    <div class="Box">
      <h3>Case</h3>
    </div>
  </section>

【讨论】：