Algumas dicas HTML

before-after.css

section {
  border: 1px solid #000;
  height: 100px;
  margin: 40px auto;
  width: 400px;
}
h1 {
  background-color: #990000;
  color: #FFF;
  font-size: 1.2em;
  left: -10px;
  padding: 5px 0;
  position: relative;
  text-align: center;
  width: 420px;
}
h1::before {
  border-color: transparent #7C0000 #7C0000 transparent;
  border-style: solid;
  border-width: 5px;
  content: "";
  left: 0;
  position: absolute;
  top: -10px;
}
h1::after {
  border-color: transparent transparent #7C0000 #7C0000;
  border-style: solid;
  border-width: 5px;
  content: "";
  position: absolute;
  right: 0;
  top: -10px;
}

before-after.html

<section>
<h1>Um exemplo de pseudo elementos</h1>
</section>