Рисование линий на html5/css

130

20 октября 2019, 18:20

Подскажите как можно нарисовать такие линии и поместить внутри текст как на этой картинке.

Обыскал весь интернет, где-то есть только квадраты, а где только линии на canvas, пытался сделать под себя, не получилось. Мне нужны именно 2 этих прямых угла. Помогите их нарисовать, пожалуйста.

Answer 1

Общий принцип такой:

*{ 
  box-sizing:border-box; 
} 
span{ 
  padding:5px 15px; 
  position:relative; 
  Font-size:20px; 
} 
span:before, 
span:after{ 
  content:''; 
  display:block; 
  position:absolute; 
  width:10px; 
  height:10px; 
  border:1px solid; 
} 
span:before{ 
  top:0; 
  left:0; 
  border-width:1px 0 0 1px; 
} 
span:after{ 
  bottom:0; 
  right:0; 
  border-width:0 1px 1px 0; 
}