How to make a bottom arrow hole in a rectangle

Question

I want to change the button on my website. like this.

But I don't know how to change the bottom style of this button. I heard we can do this using '::after' or '::before'.

Answer 1

Something like this is one of the 100 options

.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);
}

<div class="my-special-thing">Post a job</div>

Answer 2

Yes , this can be achieved using before & after , please check the code below

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