How to code an arrow using css

Question

Hi guys I'm trying to code an arrow like this in css, I'e viewed examples on codepen, but now I'm thinking whether it is actually possible?

Answer 1

For arrow and lines i have use border

.content {
  margin-top: 30px;
  position: relative;
  border: 2px solid black;
  border-bottom: 2px;
  border-radius: 5px;
  width: 200px;
  height: 40px;
}

.content:before,
.content:after,
.center:before {
  content: '';
  width: 0;
  height: 0;
  border-width: 8px 8px;
  border-color: #000 transparent transparent transparent;
  border-style: solid;
  position: absolute;
}

.content:before {
  left: -8px;
  top: 36px;
}

.content:after {
  right: -8px;
  top: 36px;
}

.center:before {
  right: -8px;
  top: 60px;
}

.center {
  position: absolute;
  height: 60px;
  top: -24px;
  left: 50%;
  margin-left:-2px;
  border: 1px solid black;
}

<div class="content">
  <div class="center">
  </div>
</div>