How to make a arrow using rectangle and triangle in css - css

Question

How do I make this arrow using css?
I'm not able to remove the border of the third side of the triangle
Here is what I have so far:
#arrowbox
{
width: 200px;
height: 50px;
background-color:white;
margin-left:100px;
margin-top:100px;
position: relative;
border-style:solid;
}
#arrowbox:after {
left: 100%;
top: 20%;
content: " ";
height: 0;
width: 0;
position: absolute;
border-style:solid;
border-color: rgba(0, 128, 0, 0);
border-left-color: black;
border-width: 40px;
margin-top: -25px;
}
<div id="arrowbox"></div>

Answer 1

You can try something like this using pseudo-element and gradient:
.arrow {
width:300px;
height:100px;
margin:50px;
border:1px solid #000;
border-right:none;
position:relative;
}
.arrow:before {
content:"";
position:absolute;
right:-50px;
width:100px;
height:100px;
border-top:1px solid #000;
border-right:1px solid #000;
transform: rotate(45deg);
}
.arrow:after {
content:"";
position:absolute;
right:0;
top:-20px;
bottom:-20px;
width:1px;
background:
linear-gradient(#000,#000)top/100% 20px no-repeat,
linear-gradient(#000,#000)bottom/100% 20px no-repeat;
}
<div class="arrow">
</div>
You can also use polygon element of SVG to easily create it:
svg polygon {
stroke:#000;
fill:transparent;
}
<svg height="100" width="300">
<polygon points="0,20 0,80 200,80 200,100 300,50 200,0 200,20" />
</svg>

Answer 2

You could take advantage of the clip-path property, however, its not widely supported at this time: https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path
#arrowbox {
width: 100px; height: 100px;
background: pink;
-webkit-clip-path: polygon(0% 35%, 75% 35%, 75% 25%, 99% 50%, 75% 75%, 75% 65%, 0% 65%);
clip-path: polygon(0% 35%, 75% 35%, 75% 25%, 99% 50%, 75% 75%, 75% 65%, 0% 65%);
}
<div id="arrowbox"></div>
For those looking for an SVG option, this would give you the luxury of filling it with a color if you wish, or add other styling attributes as needed:
svg { width: 150px; height: 150px; }
<svg viewBox="0 0 100 100" fill="none" stroke="black" stroke-width="1">
<path d="M 1,35 75,35 75,25 99,50 75,75 75,65 1,65z" />
</svg>
<hr>
<svg viewBox="0 0 100 100" fill="green" stroke="blue" stroke-width="2">
<path d="M 1,35 75,35 75,25 99,50 75,75 75,65 1,65z" />
</svg>