curious1 curious1 - 3 years ago 137
CSS Question

A background with two responsive triangles

I have the following html:

<div class="text-beside-wrapper">
<div class="text-beside">
some text goes here.

CSS is as follows:

body {
padding: 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:

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?


I forgot to mention that
height: 415px
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
) could change with any ratios.

Answer Source

you can do it using linear gradients

background:linear-gradient(to bottom right, transparent calc(50% - 1px), black calc(50% - 1px), black 50%, transparent 50%) ;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download