用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>

谢谢

- adytzul89

---

背景总是白色的吗？箭头位置可以改变吗？ - Justinas

Answer 1

稍微使用一点 transform:skew() 就可以了。

除非你的目标是非常老的浏览器，否则不再需要在这些规则上包含供应商特定的前缀；它们已经被广泛支持。（自2012年以来，Mozilla/Firefox和IE不再需要2D变换的前缀；Safari自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>

- Daniel Beck

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>

- Temani Afif