How to Create Vertical Lines Full Page With Css3

I have done some of the hacks with css in all screens. I wanted to have this lines to work to the iPad screen.

The Css3 Code

html,
body {
height: 100%;
}

body {
position: relative;
}

body:after {
content: "";
height: calc(100% + 15px);
width: 2px;
background: transparent;
position: absolute;
right: 100px;
top: -15px;
bottom: 0;
transform: rotate(8deg);
-webkit-transform: rotate(8deg);
-moz-transform: rotate(8deg);
transform-origin: bottom;
border-left: 1px solid #a0634e;
}

.top-content p {
padding-right: 120px
}

HTML Code

<html>

<body>
<main class="main" id="main">
<div class="container">
<div class="page-wrapper">
<div class="top-section">
<div class="top-logo">
<a href="#" target="_blank"><img src="http://via.placeholder.com/250x150"></a>
</div>
<div class="top-content">
<span class="title">TITLE</span>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
</div>
</div>
</div>
</div>
</main>
</body>
<html>

I recommend you you to try use a tag code for wordpress.com and weebly websites..

See: How to make Clickable Div Using Css3

<svg height="210" width="500">
 <line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" />
</svg>

Written By:

Sarmad Gardezi A blog scientist by Mind and a Passionate Blogger by heart. Sarmad is Freelancer, Entrepreneur and Google Apps Scripts Developer from Islamabad, Pakistan.

Subscribe to Email Newsletter