create hr with css and html with arrow bottom left

Question

I need some help.

How can I display the html code according to the attached image.

I tried modifying the css, but it's not ok

div {
    margin:50px;

    background-color: #c1c1c1; 
    border:#000 solid 1px;
    position:relative;
}
div:after{
    content:'';
    width:24px;
    height:24px;
    background:#fff;
    position:absolute;
    -moz-transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    transform:rotate(45deg);
    top:-12px;
    left:50px;
    border-right:#000 solid 2px;
    border-bottom:#000 solid 2px;

} 

<div></div>

Thank You

Answer 1

A bit of transform:skew() does it.

Unless you're targeting very old browsers, it's no longer necessary to include the vendor-specific prefixes on these rules; they're broadly supported. (Mozilla/Firefox and IE haven't needed the prefixes for 2d transforms since 2012; Safari since 2015).

div {
    margin:50px;
    background-color: #c1c1c1; 
    border:#000 solid 1px;
    position:relative;
}
div:after{
    content:'';
    width:24px;
    height:24px;
    background:#fff;
    position:absolute;
    top:-12px;
    left:50px;
    border-bottom:#000 solid 2px;
    border-left:#000 solid 2px;
    transform:skew(0,-45deg)
}

<div></div>

Answer 2

Here is another way to have transparency:

div {
  margin: 50px;
  height: 2px;
  background: linear-gradient(to right, #000 44px, transparent 44px, transparent 60px, #000 60px);
  position: relative;
}

div:before,
div:after {
  content: '';
  width: 2px;
  position: absolute;
  top: 2px;
  background: #000;
}

div:after {
  height: 26px;
  transform-origin: top right;
  transform: rotate(45deg);
  left: 60px;
}

div:before {
  height: 19px;
  top: 0px;
  left: 42px;
}

body {
  background: pink
}

<div></div>