A background with two responsive triangles

Question

I have the following html:

<div class="text-beside-wrapper">

  <div class="text-beside">

      some text goes here.

  </div>

</div>

CSS is as follows:

body {

    padding: 0;

    margin:0;



}

.text-beside-wrapper {

    background-color: #e3dfdc;

    height: 415px;

    width: 300px;

}



.text-beside-wrapper:after {

    border-right: 300px solid transparent;

    border-top: 415px solid #dbd5c5;

    content: '';

    position: absolute;

    top: 0;

    width: 0;

    z-index: 5;

}

This is the demo: https://jsfiddle.net/zby230f9/7/

The problem is that it is not responsive. I hope to have the same design, and the two triangles maintain the cutting line connecting two opposite corners no matter what the height and width of the area. Is this doable with CSS?

UPDATE

I forgot to mention that

height: 415px

and

width: 300px

are used above because that is how the text on desktop makes it that way. I dont want to maintain the same ratio because the height and width of the text area (class

text-beside

) could change with any ratios.

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

you can do it using linear gradients https://jsfiddle.net/RACCH/54s72wxq/

background:linear-gradient(to bottom right, transparent calc(50% - 1px), black calc(50% - 1px), black 50%, transparent 50%) ;

A background with two responsive triangles

Sign up