This code snippet allows you to create an eye-catching diagonal line background effect using CSS. The code applies a unique style to an HTML section, giving it a visually appealing appearance. The major functionality lies in the CSS properties applied to the ‘section’ element. It sets a vibrant background color and adds a captivating diagonal line effect using pseudo-elements.
The responsive design ensures that the diagonal lines adapt according to the screen size. By using this code, you can easily enhance the visual appeal of your website sections, making them stand out and leaving a lasting impression on your visitors.
How to Create Diagonal Line Background
1. Create the HTML structure for the diagonal line as follows:
<section>
<div class="content">
<h1>Diagonal</h1>
</div>
</section>
2. Style diagonal line using the following CSS styles:
h1{
font-family: 'Shrikhand', cursive;
font-weight: normal;
font-size: 80px;
color: #333333;
}
section{
background: #ff574a;
overflow: hidden;
position: relative;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
-webkit-transition: opacity 350ms linear;
-moz-transition: opacity 350ms linear;
-ms-transition: opacity 350ms linear;
-o-transition: opacity 350ms linear;
transition: opacity 350ms linear;
}
section > * {
position: relative;
z-index: 2;
}
section:after{
content: "";
position: absolute;
bottom: 0;
right: 0;
width: 0;
height: 0;
border-style: solid;
border-color: transparent transparent #f6f2f2 transparent;
border-width: 0 0 400px 400px;
}
@media(min-width: 768px){
section:after{
border-width: 0 0 1200px 500px;
}
}
@media(min-width: 992px){
section:after{
border-width: 0 0 1200px 700px;
}
}
.content{
background: transparent;
text-align: center;
padding: 0 4%;
}
That’s all! hopefully, you have successfully created a diagonal line background using HTML & CSS. If you have any questions or suggestions, feel free to comment below.
