How do I make a slash in a webpage with HTML/CSS? - html

Question

I'm trying to produce a parallelogram/slash look in my webpage as follows:
It's easy to smash two divs together and then you have a rectangle next to a rectangle, but this slash is mind boggling. Is this possible with pure CSS or HTML? The examples I've seen all use SVGs.

Answer 1

html,
body {
min-height: 100%; /* demo only */
}
#page {
min-height: 100vh; /* demo only */
}
#page:before {
content: '';
position: absolute;
width: 25%;
height: 150%;
left: -10%;
top: -25%;
background: #F6990D;
transform: rotate(4deg);
border-right: 4px solid #FEBF78;
}
<div id="page"></div>

Answer 2

Just adding the linear option, but getting around the aliasing jagged edges will be tough regardless of the approach you take.
div {
position: absolute;
top: 0;right: 0;bottom: 0; left:0;
background: rgba(255,163,3,1);
background: linear-gradient(95deg, rgba(255,163,3,1) 0%,
rgba(255,163,3,1) 9%,
rgba(245,205,135,1) 9%,
rgba(245,205,135,1) 10%,
rgba(255,255,255,1) 10%,
rgba(255,255,255,1) 100%
);
}
<div></div>

Answer 3

Start from a square div with four thick borders.
div {
width: 50px;
height: 50px;
border-left: 50px solid green;
border-top: 50px solid red;
border-right: 50px solid blue;
border-bottom: 50px solid yellow;
}
<div> </div>
Now reduce the square to zero height.
div {
width: 50px;
height: 0;
border-left: 50px solid green;
border-top: 50px solid red;
border-right: 50px solid blue;
border-bottom: 50px solid yellow;
}
<div> </div>
Now take off the left and bottom borders.
div {
width: 50px;
height: 0;
border-top: 50px solid red;
border-right: 50px solid blue;
}
<div> </div>
Finally, shrink the right border and make it transparent.
div {
width: 50px;
height: 0;
border-top: 50px solid red;
border-right: 15px solid transparent;
}
<div> </div>
You can adjust the numbers and add a shadow to make it look more like the example image. You can also add transform: rotate(360deg) to get cleaner aliasing in certain scenarios (this is a hack; it tricks the browser into switching to GPU-accelerated rendering mode if such a mode is available).
div {
width: 50px;
height: 0;
border-top: 300px solid orange;
border-right: 15px solid transparent;
filter: drop-shadow(10px 0 yellow);
/* HACK: trick the browser into GPU-accelerated mode if possible,
* this can help get cleaner aliasing in certain scenarios. */
transform: rotate(360deg);
}
<div> </div>

Answer 4

#slash {
width: 15px;
height: 100px;
transform: skew(-20deg);
background: red;
}
#container {
padding-left: 20px;
}
<div id="container">
<div id="slash">
</div>
</div>
Just create a square and use skew transform