Open In App

How to Make Oblique Lines with CSS / Bootstrap 3 ?

Improve
Improve
Like Article
Like
Save
Share
Report

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=
        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=
        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.



Last Updated : 16 Nov, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads