How can I create an odd-shaped triangle using CSS? Initially, I used transparent borders with transform: rotate to achieve the left triangle shape successfully. However, I am now attempting to use a gradient border image pattern as the background for the same triangle, and I am facing difficulties in making it work. I have tried adjusting parameters such as border-width, utilizing wrappers, and adding overflow:hidden, among other things, but nothing seems to produce the desired result. In the snippet provided, you can see my attempt on the right side where the pattern does not conform to the triangle shape. Any suggestions or solutions?
#top-left {
position:absolute;
left:78px;
width: 0;
height: 0;
border-top: 100px solid transparent;
border-right: 80px solid black;
border-bottom: 50px solid transparent;
-webkit-transform: rotate(-20deg);
}
#top-right {
position:absolute;
left:300px;
width: 0;
height: 0;
border-image: repeating-linear-gradient( 0deg, pink, pink 1%, purple 1%, purple 8%) 10;
border-image-width: 100px 80px 50px 0px;
border-width: 100px 80px 50px 0px;
border-style: solid;
-webkit-transform: rotate(-20deg);
}<div id="wrapper">
<div id="top-left"></div>
<div id="top-right"></div>
</div>Update: While Andrey Fedorov's answer is helpful, there is a particular issue that arises when the background is not a solid color. Take, for example, the code snippet below:
body{
background-color: #6d695c;
background-image:
repeating-linear-gradient(120deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px),
repeating-linear-gradient(60deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px),
linear-gradient(60deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1)),
linear-gradient(120deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1));
background-size: 70px 120px;
}
#wrapper {
position: relative;
}
#top-left {
position:absolute;
left:0px;
width: 0;
height: 0;
border-top: 100px solid #fff;
border-right: 80px solid transparent;
border-bottom: 50px solid #fff;
-webkit-transform: rotate(-20deg);
}
#top-right {
position:absolute;
z-index: -10;
left:0;
width: 0;
height: 0;
border-image: repeating-linear-gradient( 0deg, pink, pink 1%, purple 1%, purple 8%) 10;
border-image-width: 100px 80px 50px 0px;
border-width: 100px 80px 50px 0px;
border-style: solid;
-webkit-transform: rotate(-20deg);
}<div id="wrapper">
<div id="top-left"></div>
<div id="top-right"></div>
</div>