Looking to create a right triangle with a linear-gradient background color in CSS? Wondering if it's possible?
Check out the code I currently have for a right triangle with a single background color. You can also find the same code here.
<style>
body {
position: relative;
height: 100vh;
width: 100vw;
background: lightgrey;
}
.wrapper {
width: 760px;
height: 35px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.triangle {
border-right-width: 760px;
border-bottom-width: 35px;
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 0;
border-bottom-style: solid;
border-right-style: solid;
border-bottom-color: red;
border-right-color: transparent;
}
</style>
<body>
<div class="wrapper">
<div class="triangle"><!-- ### --></div>
</div>
</body>
Wanting to achieve a right triangle with a linear-gradient background that transitions from orange to red from left to right. The area surrounding the triangle must remain transparent.