Google+
4elements web design & consultancy

Shineyrock

web design & consultancy
Shineyrock web design & consultancy

Shineyrock

  1. web design and consultancy

blog

  1. Home
  2. blog
  3. read
  4. How to Create Diagonal Lines With CSS
  • like 4 19

    How to Create Diagonal Lines With CSS

    1. January 2014
    2. Daily
    3. read 0

    A lot of the websites that we visit have elements laid out in rectangular boxes. You don't have to put in a lot of effort to make rectangular shapes on a webpage. It is also relatively easy to create circular shapes using the border-radius property.

    In this tutorial, you will learn how to create non-rectangular diagonal lines or elements with the help of different CSS properties. Please note that our focus here will be on the appearance of the element, not the flow of content inside or around it.

    Using Gradients to Create Diagonal Lines

    Gradients have been around for a while now in CSS. They allow you to create a transition from one color to the next in a direction that you specify. You can use gradients in all places where you can use an image element. Gradients can be linear, radial, or conic. For our situation, we only need linear gradients.

    You can create linear gradients using the linear-gradient CSS function, which accepts a number of arguments. The first optional argument determines the direction in which the gradient will flow. You can skip it entirely and just start specifying colors for the gradient. When it's left unspecified, the gradient will run from top to bottom.

    background: linear-gradient(black, white);

    Since we want the gradient to go from left to right, we will set the angle to 90 degrees.

    background: linear-gradient(90deg, black, white);

    You can also pass around a stop value with each color. The stop value determines what the color will be at a particular position when moving along the direction of the gradient. You can create linear gradients with two different colors at the same stop value. This will create an abrupt color change instead of a gradual transition.

    background: linear-gradient(90deg, black 11ch, white 11ch);

    The above CSS rule states that the color of the gradient will flow in the left to right direction and be perfectly black on the left side of the 11ch distance and white on the right side of the 11ch distance.

    At this point, we are back to our rectangular box. However, it is easy to create a diagonal line or background now by simply changing the angle of the gradient to some other value like 70deg or 120deg, depending on the direction in which you want the diagonal line to lean.

    You can also increase the stop value for the white color to a slightly larger value like 11.05ch in order to avoid any jagged edges.

    background: linear-gradient(70deg, black 11ch, white 11.05ch);

    Using Transforms to Create Diagonal Lines

    You can use a combination of pseudo-elements and transforms to create diagonal lines. We will start with a simple heading whose position is set to relative. This helps us position the pseudo-element relative to the heading itself. The width of the heading is set to fit-content so that it doesn't overextend.

    h1.pseudo-element {
  width: fit-content;
  position: relative;
}

    Now use the following CSS to create a slanted ::after pseudo-element.

    h1.pseudo-element::after {
    content: "";
    width: 50px;
    height: 100%;
    position: absolute;
    right: -20px;
    top: 0;
    background: black;
    z-index: -1;
    transform: skew(25deg);
}

    The value of the content property is set to be a blank string because we don't actually want to display anything. The width you set for the pseudo-element will depend on how wide you want the slant to be. The height is set to 100% to cover the full height of the heading.

    Setting the top property to 0 aligns the pseudo-element with the top of our heading. The negative value of the right property then moves it beyond the right edge of the heading. A negative value of z-index ensures that the pseudo-element is rendered under the main heading.

    The slant in the pseudo-element is provided by the transform property. We set a value of 25deg to skew() in our case. This will control the direction and amount of slanting.

    Some of you might be wondering why I didn't simply apply the skew transform to the main heading in order to create a slanted background. The reason is that using skew on the main heading would have skewed the text content as well. This is evident from the embedded CodePen below.

    Using the clip-path Property to Create Diagonal Lines

    I will now show you one more method of creating diagonal lines in CSS. This method relies on the CSS clip-path property. You can use the CSS clip-path property to define a clipping region for any element. Any content that lies outside the clipping region you specify will be invisible to viewers. Only areas of the element that fall within the specified clip-path will be visible.

    The property can take a lot of valid values, which you can read about in the MDN documentation. However, we are only interested in defining the clipping area using a basic polygon shape. The polygon shape is defined using the polygon() function, which takes three or more pairs of values that specify the coordinates of the polygon with respect to the reference box.

    Figuring out the values of different pairs for a clipping polygon manually is an error-prone and tiring process. You can use an excellent tool called CSS clip-path maker by Bennet Feely to determine the value of all the polygon coordinates. The function ultimately creates a closed polygon that determines the visible area of the element.

    You can use the following CSS to create a simple diagonal line in the background of any element.

    h1.simple-clip {
  width: fit-content;
  padding-right: 50px;
  clip-path: polygon(0 0, 90% 0, 100% 100%, 0% 100%);
}

    Setting the value of the width property to fit-content makes sure that the background doesn't extend to the entire width of the container. The padding-right property is used to provide some additional space on the right side of the heading so that the actual text content doesn't get clipped due to the clip-path property. The second value pair in the clip-path property determines how far back the heading is actually clipped. It is the position of the top-right corner in this case.

    One big advantage of the clip-path property is that you are not limited to simple diagonal clips of the element. You can define your clipping region however you like. Here is another example that creates a slightly more complicated clipping of the heading.

    h1.complex-clip {
  width: fit-content;
  padding-top: 20px;
  padding-right: 50px;
  clip-path: polygon(0 20%, 90% 0, 100% 100%, 0% 100%);
}

    This time, I have also added some extra padding to the top to compensate for the clipping.

    Which Technique Should You Use?

    We have discussed three different methods of creating diagonal lines with CSS. I am sure you can achieve the same effect with many more methods. The technique you use for creating these diagonal lines in your own projects depends on your objectives.

    If your top priority is browser support, you should consider using either transforms or gradients. This does not mean that clip-path is not widely supported. In fact, the clip-path property is supported by around 90% of browsers without a browser prefix. It is just that linear gradients enjoy slightly wider support.

    If the content length is variable and you don't want to go back and forth in the CSS to tweak different property values to get the right slant angle or avoid content clipping, you should consider using transforms with pseudo-elements. The element width in that case would be determined by the content, and there is no risk of clipping. The pseudo-element would create the slant for you.

    What if you want to use the pseudo-element for something else? In that case, your option is to either use gradients or the clip-path property. This is because you are only allowed to have a single pseudo-element of each type.

    What if you want to create some complex background shapes for your element? Your best bet then would be to use the clip-path property. While you can emulate some of the complex shapes using gradients and transforms, it would be a lot easier to simply use clip-path. Just make sure that you pad the content accordingly so that it doesn't get clipped.

    Final Thoughts

    I am hoping that you will be able to use one of these techniques to create diagonal lines in your own projects. As an exercise, try to come up with one more way of creating these diagonal lines by yourself. You should also consider reading other CSS tutorials on Envato Tuts+ to further improve your skills. 

    Photo

    martijn broeders

    founder/ strategic creative at shineyrock web design & consultancy
    e-mail: .(JavaScript must be enabled to view this email address)
    phone: 434 210 0245
    4
    Add a comment...
    4elements
    Comments

By - category

By - date

Copyright © 1999 - 2026 Shineyrock web design and consultancy, All Rights Reserved / Terms of Conditions / Sitemap: XML, HTML, Images, Mobile, News