CSS triangle spanning 100%?

Hi guys,

I’m not sure this is the forum for CSS questions as we are all into ‘no code’ after all! I have need to show a triangle (diagonal lines) on a window image, exactly like the green lines in the example below;

side hung

I have been able to create a CSS triangle with a border, see below, but I simply can not make it 100% width and height. The lines need to go from one side to the other.

Screenshot 2022-09-16 234651

Any CSS experts out there!?

Here’s my CSS

<style>

.triangle-down {
    width: 0; 
    height: 0; 
    border-left: 22px solid transparent;
    border-right: 22px solid transparent;
    border-top: 22px solid black;
    position:relative;
}
.triangle-down:after{
    content:'';
    width: 0; 
    height: 0; 
    border-left: 21px solid transparent;
    border-right: 21px solid transparent;
    border-top: 21px solid #dddddd;  
    position:absolute;
    right:-21px;
    bottom:1px;
}
</style>

I used custom CSS to achieve something similar.

Basically you’ll want to put a shape inside the group and give the shape an ID and use the below CSS

#id { -webkit-clip-path: polygon(0 25%, 100% 0, 100% 100%, 0 100%); clip-path: polygon(0 25%, 100% 0, 100% 100%, 0 100%); }

You can adjust the angles and sizes by playing around here Clippy — CSS clip-path maker

1 Like

Thank you @S2294