Creating 'wing' corner trick with pure css

Question

Is it possible to add corners like this image (top corners)? I'm not sure what the effect is called. If it is, what would be your approach?

Update: There were some who suggested that this question is a duplicate, unfortunately, the solution to the duplicate does not take into account that the 'wings' are filled in with color. While it works great for a tab that has an outline, this has an actual fill.

What is this technique Called?

Answer 1

My approach would be to use the :before and :after pseudoclasses to add and position the corner tips.

.box {
  position: absolute;
  background: gray;
  width: 400px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 0 0 10px 10px;
}

em {
  display: block;
  font-style: italic;
  font-size: 1.1em;
  color: white;
  text-align: center;
  margin: 0 auto;
  width: 100%;
  line-height: 2.2em;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);
}

.box:before,
.box:after {
  content: '';
  display: block;
  border: 10px solid transparent;
  border-top: 10px solid gray;  
  position: absolute;
  top: 0;
}

.box:before {
  left: -6px;
}

.box:after {
  right: -6px;
}

<div class="box">
  <em>Benefits Included In Members Savings Package</em>  
</div>