How to make shaped background using linear gradient?

Question

How to make side beveled background using linear gradient?

html:

<div class="signpost">
        <div class="column">
           
        </div>
        <div class="column bg-gray">
           
        </div>
        <div class="column">
        
        </div>
</div>

css:

.signpost {display: table; width: 100%; height: 100vh; }
.signpost .column {display: table-cell; width: 33.33%; height: 100%; text-align: center;}
.bg-gray {background-image: linear-gradient(to left bottom, #ededed 0%, #ededed 100%, white 0%, white 0%);}

Example

Thank you for help!

Answer 1

Try this

 .signpost { width: 100wh; height: 100vh; background: linear-gradient(to bottom right, red 40%, transparent 44%) 0 0/50px 100% no-repeat, linear-gradient(to top left, red 40%, transparent 44%) 100% 100%/70px 200% no-repeat, #ededed; }

 <div class="signpost"> </div>

Answer 2

Can be made with multiple gradients:

linear-gradient(to bottom right, red 49%, transparent 51%) x-position y-position/x-size y-size

 .box { width: 300px; height: 300px; background: linear-gradient(to bottom right, red 49%, transparent 51%) 0 0/30px 100% no-repeat, linear-gradient(to top left, red 49%, transparent 51%) 100% 100%/50px 200% no-repeat, #ededed; }

 <div class="box"> </div>

Answer 3

An idea using one gradient:

 .signpost { display: table; width: 100%; height: 100vh; }.signpost.column { display: table-cell; width: 33.33%; height: 100%; }.bg-gray { background: linear-gradient(to bottom right,red 44%, #ededed 44.1% 55%, red 55.1%) center/100vw 1000vw; } body { margin:0; }

 <div class="signpost"> <div class="column"> </div> <div class="column bg-gray"> </div> <div class="column"> </div> </div>