Show more CSS triangle examples?

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!

0 Comments

no data
Be the first to share your comment!