How to Make Oblique Lines with CSS / Bootstrap 3 ? - GeeksforGeeks

16 Nov, 2020
In order to make oblique lines with CSS, there are two main approaches. The first approach involves the clip-path property of CSS and in the second approach, we use transform property with skew() of CSS.
Approach 1: Using clip-path property: The clip-path property is generally used to clip an element to a basic shape. But it can also be used to create oblique lines with tweaking property of polygon shape of clip-path. The main disadvantage of this property is its implementation and since many changes are needed to be observed and changed for converting it into oblique lines. 
HTML
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content=        "width=device-width, initial-scale=1.0">      <title>Oblique Lines in CSS</title>      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"        integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"        crossorigin="anonymous">      <style>        body{            background-color: burlywood;            margin:0;          }          div.polygon{            height: 100vh;            width: 100vw;            background: aliceblue;            clip-path: polygon(0 60%,                 100% 3%, 100% 100%, 0 75%);            display:flex;          }                      .content{            height: 50%;            width: 100%;            padding-top: 10px;            margin: auto;            color: green;          }    </style></head>  <body>    <div class="content">        <h2>GeeksForGeeks</h2>                  <p>            This is a example of creating             oblique lines with content             using clip-path property of CSS.         </p>    </div>        <div class="polygon"></div></body>  </html>
Output:
The output image contains two oblique lines this is the zoomed output of the above part.
Using clip-path property and polygon as shape
Approach 2: Using transform property: The transform skew property of CSS helps in rotating the division along x and y-axis. The skewX() and skewY() takes degrees of rotation as input. This property implementation is simple as compared to clip-path.  Also, if you don’t want to rotate the content then we need to rotate in the reverse direction of division. 
HTML
<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8">    <meta name="viewport" content=        "width=device-width, initial-scale=1.0">      <title>Oblique line using CSS</title>      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"        integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"        crossorigin="anonymous">      <style>        body {            background-color: aliceblue;        }          .maintransform {            margin-right: 1px;            margin-left: 0px;            background-color: burlywood;            position: absolute;            top: 33px;            left: 0px;            right: 0px;            height: 250px;            color: green;            font-family: Arial, Helvetica, sans-serif;            -ms-transform: skewY(5deg);            -webkit-transform: skewY(5deg);            transform: skewY(5deg);        }          .content {            -ms-transform: skewY(5deg);            -webkit-transform: skewY(5deg);            transform: skewY(-5deg);            padding-left: 0px;        }    </style></head>  <body>      <div class="maintransform">        <h2 class="content">GeeksForGeeks</h2>          <p class="content">            This is a example of creating oblique             lines with content using transform             property of CSS. In this example             the skewY() is set to +5degrees.             You can change the angle according             to your need.        </p>    </div></body>  </html>
Output:
Here the rotation is around the y-axis and skew angle is +5(deg) whereas the text angle is at -5(deg) to make the text straight.
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
Bootstrap-Misc
CSS-Misc
HTML-Misc
Bootstrap
CSS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to Show Images on Click using HTML ?
How to set Bootstrap Timepicker using datetimepicker library ?
How to Use Bootstrap with React?
Tailwind CSS vs Bootstrap
How to keep gap between columns using Bootstrap?
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to create footer to stay at the bottom of a Web page?
How to update Node.js and NPM to next version ?
CSS to put icon inside an input element in a form