I have the following html:
<div class="text-beside-wrapper">
<div class="text-beside">
some text goes here.
</div>
</div>
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;
}
height: 415px
width: 300px
text-beside
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%) ;