[Solved] How to make this block correctly in html? [closed]

by


You can use pseudo elements on the paragraphs to draw the lines.

.line.col-md-4 {
  position: relative;
  background: white;
}
.line.col-md-4:before {
  content: '';
  background: purple;
  width: 1px;
  height: 200%;
  position: absolute;
  z-index: -1;
}
.tr:before {
  top: 50%;
  left: 0;
}
.tl:before {
  right: 0;
  top: 50%;
}
.bl:before {
  bottom: 50%;
  right: 0;
}
.br:before {
  bottom: 50%;
  left: 0;
}
.tr:before, .bl:before {
  transform: rotate(45deg);
}

.tl:before, .br:before {
  transform: rotate(-45deg);
}
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body style="background-image: url(http://images.vfl.ru/ii/1496527996/5dd30ca7/17453438.png); background-repeat: no-repeat; background-position: 50% 0%;">
	<div class="container" style="margin-bottom: 292px;">
		<div class="row">
			<div class="col-md-4 line tl">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid corrupti distinctio, doloribus quia facilis mollitia fugiat expedita dignissimos consectetur culpa illo et, inventore ipsam deserunt odit quaerat sed sunt? Eius!</div>
			<div class="col-md-4"></div>
			<div class="col-md-4 line tr">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid corrupti distinctio, doloribus quia facilis mollitia fugiat expedita dignissimos consectetur culpa illo et, inventore ipsam deserunt odit quaerat sed sunt? Eius!</div>
		</div>
	</div>
	<div class="container circle">
		<div class="row">
			<div class="col-md-4 line bl">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid corrupti distinctio, doloribus quia facilis mollitia fugiat expedita dignissimos consectetur culpa illo et, inventore ipsam deserunt odit quaerat sed sunt? Eius!</div>
			<div class="col-md-4"></div>
			<div class="col-md-4 line br">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid corrupti distinctio, doloribus quia facilis mollitia fugiat expedita dignissimos consectetur culpa illo et, inventore ipsam deserunt odit quaerat sed sunt? Eius!</div>
		</div>
	</div>
</body>
</html>

0

solved How to make this block correctly in html? [closed]