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

时间:2018-06-26 12:10:53

标签: html css

我需要一些帮助。

如何根据所附图片显示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>

model example

谢谢

2 个答案:

答案 0 :(得分:7)

一点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>

答案 1 :(得分:3)

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

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>