You can use the linear-gradient property and manipulate the angle to create a split angle effect with a CSS linear gradient for the background colour. Here's an example of how you can achieve a split-angle effect:
body {
margin: 0;
height: 100vh;
background: linear-gradient(135deg, #3498db 50%, #e74c3c 50%);
background-size: cover;
font-family: 'Arial', sans-serif;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
h1 {
font-size: 2em;
margin: 0;
}
p {
font-size: 1.2em;
margin: 20px 0 0;
}
In this example:
The
linear-gradient
property is used to create a gradient background.135deg
specifies the angle of the gradient, creating a split effect.#3498db
and#e74c3c
are the colours used for the gradient.50%
in the gradient indicates the point where the colours meet, creating the split effect.
You can change the colours, angles, and other styles as you like. This is just a simple example to help you begin.