Sure! Here are a few more examples of CSS triangles pointing in different directions:
1. Downward Triangle
.downward-triangle {
width: 0;
height: 0;
border-top: 20px solid transparent;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid #9c27b0;
}
2. Leftward Triangle
.leftward-triangle {
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-right: 20px solid #9c27b0;
}
3. Rightward Triangle
.rightward-triangle {
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid #9c27b0;
}
4. Larger Triangle
.large-triangle {
width: 0;
height: 0;
border-top: 40px solid #9c27b0;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
}
Usage
You can use these classes in your HTML like this:
<div class="downward-triangle"></div>
<div class="leftward-triangle"></div>
<div class="rightward-triangle"></div>
<div class="large-triangle"></div>
Feel free to adjust the border sizes and colors to fit your design! If you have more questions or need further examples, let me know!
