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

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



<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=""></a>
<div class="top-content">
<span class="title">TITLE</span>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>

I recommend you you to try use a tag code for 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" />

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