Striped triangle in CSS [closed] - css

Question

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
I'm trying to code a striped triangle in CSS, which will be a resize icon as you can normally find in the lower right of a window such as this one:
I tried using repeating-linear-gradient and creating a triangle with the div-border trick, but I can't combine those, as the triangle is made from borders, and the gradient is for background.
So how do I get a div that looks like the image? I can't find anything helpful on google or here on stackoverflow.
Any help is highly appreciated :)

Answer 1

I would use box shadow on pseudo element to create 3 strips, and rotate it to bottom right corner
.strip_tri {
width: 20px;
height: 20px;
position: relative;
overflow: hidden;
}
.strip_tri::after {
content: '';
position: absolute;
display: block;
width: 50px;
height: 0;
box-shadow: 0 10px 0 1px black, 0 17px 0 1px black, 0 24px 0 1px black;
transform: translate(-50%, -50%) rotate(-45deg) scale(0.5);
top: 50%;
left: 50%;
}
<div class="strip_tri"></div>

Answer 2

I used the links you provided to make this:
#a {
background: repeating-linear-gradient( -45deg, #fff, #fff 2px, #000 2px, #000 3px);
width: 20px;
height: 20px;
}
#b {
width: 0;
height: 0;
border-right: 25px solid transparent;
border-bottom: 25px solid transparent;
border-top: 25px solid #fff;
}
<div id="a">
<div id="b">
</div>
</div>
Of course, you can change the size of the div and the stripes to whatever you please.