CSS Align Text on Slanted Lines

In this article, we’ll cover how to align text on slanted lines using CSS.

Read more: CSS Tutorial

What are slanted lines?

Slanted lines are a technique used in web design to enhance and highlight specific elements. They can be applied to backgrounds, borders, titles, and other elements, giving a webpage a more creative and modern look.

Methods for aligning text on a slanted line

A common method is to use the rotate() function of the transform property to create a slanted line. We can also use pseudo-elements (:before or :after) to create this slanted line.

.slanted-line {
position: relative;
overflow: hidden;
}

.slanted-line:before {
content: '';
position: absolute;
bottom: 0;
left: -50%;
width: 200%;
height: 2px;
background-color: #000;
transform: rotate(-6deg);
transform-origin: bottom center;
}

In this example, we create an element with the class name .slanted-line and use the :before pseudo-element to create a slanted line. We set the pseudo-element’s content to an empty string, then set its width to 200%, its height to 2px, and its color to black. Using the transform property’s rotate() function, we tilt the line -6 degrees and set its rotation center to the bottom center.

Aligning Text on a Slanted Line

To align text on a slanted line, we can use CSS’s built-in alignment methods, such as text-align and vertical-align. Here’s an example:

.slanted-line {
position: relative;
overflow: hidden;
}

.slanted-line:before {
content: '';
position: absolute;
bottom: 0;
left: -50%;
width: 200%;
height: 2px;
background-color: #000;
transform: rotate(-6deg);
transform-origin: bottom center;
}

.text {
position: absolute;
top: -20px;
left: 0;
right: 0;
text-align: center;
white-space: nowrap;
}

In the example above, we create a class called .text for the text element. By absolutely positioning the text element and setting its top property to -20px, we raise the text above the slanted line. By setting the text element’s left and right properties to 0, we stretch the text element to the full width of the parent element. Using the text-align property with a value of center, we center the text. We also set the white-space property with a value of nowrap to prevent the text from wrapping.

Changing the Color and Style of the Slanted Line

To change the color and style of the slanted line, simply modify its background color, height, and width. For example, change the color of the slanted line to red:

.slanted-line:before {
background-color: red; 
} 

If you want to change the angle of the slanted line, just modify the angle value in the rotate() function:

.slanted-line:before {
transform: rotate(-10deg);
}

Feel free to adjust these values ​​to create the style you want.

Summary

By using CSS slanted lines and text alignment techniques, we can achieve even more creative and unique effects in web design. Slanted lines can be easily created using the transform() and rotate() functions, and text can be aligned on them using the text-align and vertical-align properties. By adjusting properties like the line’s color, angle, width, and height, we can fully customize the style and effect of the line. We hope this article has helped you learn more about CSS slanted lines and alignment techniques.