用css和html用左下方的箭头创建hr

Question

我需要一些帮助。

如何根据所附图片显示html代码。

我尝试修改CSS，但这不行

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>

谢谢

Answer 1

一点transform:skew()做到了。

除非您要定位的是非常老的浏览器，否则不再需要在这些规则中包括供应商特定的前缀。他们是broadly supported。 （Mozilla / Firefox和IE自2012年以来就不需要2d转换的前缀；自2015年以来就不需要Safari）。

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

这是提高透明度的另一种方法：

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>