<div>
<button class="item">Why?</button><span class="item">Because...</span>
</div>

<div>
<label for="input" class="item">Why?</label><input type="text" id="input">
</div>
* { box-sizing: border-box }
div {display: flex}

.item {
  font-family: sans-serif;
  display: inline-flex;
  align-items: center;
  height: 40px;
  position: relative;
  background: #ff6700;
  color: white;
  padding: 0 10px;
  margin-left: 18px;
  margin-bottom: 10px;
  margin-right: 5px;
  border: 0;
  font-size: 100%;
  
  &::before,
  &::after {
    content: '';
    position: absolute;
    top: 0;
    width: 0;
    height: 0;
    border-style: solid;
  }
  
  &::before {
    left: -18px;
    border-width: 20px 0 20px 18px;
    border-color: #ff6700 #ff6700 #ff6700 transparent;
  }

  &::after {
    border-width: 20px 0 20px 18px;
    right: -18px;
    border-color: transparent #ff6700 transparent #ff6700;
  }
}

span.item {
 background: ForestGreen;

  &::before,
  &::after {
    border-color: ForestGreen ForestGreen ForestGreen transparent;
  }

  &::after {
    border-color: transparent ForestGreen transparent ForestGreen;
  }
}

input {
  font-size: 1.5em;
  height: 40px;
  padding-left: 18px;
  border: 1px solid #ccc;
  border-left: 0
}
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.