[CSS] CSS realizes triangle

foreword

【Purpose】

• By summarizing the questions involved in the interviews of the small partners, to check for gaps in the front-end knowledge
• Summarize the knowledge for the small partners who are preparing for the interview, and help yourself to understand the front-end knowledge more deeply.

【content】

• The relevant content will be introduced first
• Then list common interview question types.

【Kind tips】

• Some of the notes in the notes have been sorted out after personal understanding, and there may be deviations. Readers are also kindly requested to help point out, thank you.

---

knowledge introduction

Method 1: Use border (common)

[Explanation] Do not set the width and height, use the border size to control the size of the triangle

【Decomposition steps】

1. set a divwidth and height

   【Example】

   <style>
       #triangle{
           
           
           width: 0;
           height: 0;
           border: 100px solid;
           border-color: orangered skyblue gold yellowgreen;
       }
   </style>
   

   

2. set transparent

   • Leave the border settings that you want to point in the opposite direction , and set the borders in other directions to be transparenttransparent

   [Example] Realize an upward pointing triangle

   <style>
       .Up{
           
           
           width: 0;
           height: 0;
           border-top: 100px solid transparent; 
           border-right: 100px solid transparent;
           border-left: 100px solid transparent;
           border-bottom: 100px solid orangered;
       }
   </style>
   

   【Effects】Point up, point down, point left, point right

   

How to set up different triangles

• Triangles of different directions and sizes can be achieved by adjusting the values ​​​​of borders in different directions

Method 2: Use linear-gradient

[Explanation] Two-color gradient, adjusted to solid color, one color transparent

【Decomposition steps】

1. two-color gradient

   <style>
       .first{
           
           
           background: linear-gradient(45deg, deeppink, yellowgreen);
       }
   </style>
   

2. tune to solid color

   <style>
       .second{
           
           
           background: linear-gradient(45deg, deeppink, deeppink 50%, yellowgreen 50%, yellowgreen 100%);
       }
   </style>
   

3. one color transparent

   <style>
       .second{
           
           
           background: linear-gradient(45deg, deeppink, deeppink 50%, transparent 50%, transparent 100%);
       }
   </style>
   

【Effect map】

How to set up different triangles

• By rotating rotateor scale, you can also get triangles of various angles and sizes

Method 3: Use clip-path

【Explanation】Cut the polygon to create the displayable area of ​​the element. The part inside the area is displayed, and the part outside the area is hidden.

【Example】

<style>
    div{
      
      
        width: 100px;
        height: 100px;
        background: gold;
        clip-path: polygon(0 0, 0 100%, 100% 100%);
    }
</style>

clip-path：

• polygon(x1 y1，x2 y2，x3 y3)；

Learn more about the clip-path attribute

【Effect map】

How to set up different triangles

• You can use the CSS clip-path maker

Method 4: Using Characters

The decimal Unicode representation of the triangle-shaped character

<div class="one">&#9658; </div>
<div class="two">&#9660; </div>
<div class="three">&#9650; </div>
<div class="four">&#8895; </div>
<div class="five">&#9651; </div>

【Effect map】

【Notice】Use font-sizeto control the size, use colorto control the color

Common Interview Questions

short answer questions

【Similar topic】

Implementing Triangles with CSS

CSS draw cube, triangle

how to draw a triangle

…

epilogue

【grateful】

Thanks to Programmer Yupi for providing the interview duck platform!!!

Thank you readers for watching to the end!!!