I want to position a css triangle as a background

Question

I want to build the following layout:

Preferable i want only use css for that. But even with an background-image i wouldn\'t know how to build it. I searche

Answer 1

You can set 2 light gradients on top of the darker background.

They overlap each other and leave only the remaining triangle darker

div {
    width: 400px;
    height: 200px;
    border: solid 1px green;
    background: linear-gradient(to top left, lightgreen 50%, transparent 50%),
    linear-gradient(to top right, lightgreen 50%, transparent 50%), green;
}