css 三角形

     在设计稿中，经常会遇到使用三角形的样式，可以使用img显示，icon，svg或者前端自己实现，简单粗暴直接上代码：

  • 实体三角形：

            首先先来实现一个正方形

      

 1 <div class="triangleBox" />
 2 
 3 .triangleBox {
 4     width: 0;
 5     height: 0;
 6     border-top: 50px solid red;
 7     border-right: 50px solid orange;
 8     border-bottom: 50px solid yellow;
 9     border-left: 50px solid green;
10   }

由上面的代码可以看出正方形是由border拼凑出来的,那么展示top箭头的样式，可以先用border设置一个透明盒子，这样即可展示出border-top的样式，以此类推：

         

 1 方案一：
 2  <div class="triangle01" />
 3  
 4  .triangle01 {
 5      width: 0;
 6      height: 0;
 7      border: 50px solid transparent;
 8      border-top: 50px solid red;
 9    }
10 
11 
12 方案二：
13 <div class="triangle top" />
14 
15  .triangle {
16     position: relative;
17     width: 0;
18     height: 0;
19     border: 50px solid;
20     border-color: #cddc39 transparent transparent transparent;
21   }
22  .triangle.top {
23     transform: rotate(0deg);
24   }

 

        

 1 方案一： 
 2 <div class="triangle02" />
 3  
 4   .triangle02 {
 5      width: 0;
 6      height: 0;
 7      border: 50px solid transparent;
 8      border-right: 50px solid orange;
 9    }
10 
11 
12 方案二：
13 <div class="triangle right" />
14 
15   .triangle {
16     position: relative;
17     width: 0;
18     height: 0;
19     border: 50px solid;
20     border-color: #cddc39 transparent transparent transparent;
21   }
22  .triangle.right {
23     transform: rotate(90deg);
24   }

 

          

 1 方案一：
 2   <div class="triangle03" />
 3  
 4  .triangle03 {
 5      width: 0;
 6      height: 0;
 7      border: 50px solid transparent;
 8      border-bottom: 50px solid yellow;
 9    }
10 
11 
12 方案二：
13 <div class="triangle bottom" />
14 
15   .triangle {
16     position: relative;
17     width: 0;
18     height: 0;
19     border: 50px solid;
20     border-color: #cddc39 transparent transparent transparent;
21   }
22   .triangle.bottom {
23     transform: rotate(180deg);
24   }

 

              

 1  方案一：
 2  <div class="triangle04" />
 3 
 4   .triangle04 {
 5      width: 0;
 6      height: 0;
 7      border: 50px solid transparent;
 8      border-left: 50px solid green;
 9    }
10 
11 
12 方案二：
13 <div class="triangle left" />
14 
15  .triangle {
16     position: relative;
17     width: 0;
18     height: 0;
19     border: 50px solid;
20     border-color: #cddc39 transparent transparent transparent;
21   }
22   .triangle.left {
23     transform: rotate(270deg);
24   }

  

 1 图一：
 2 <div class="triangle05" />
 3 
 4   .triangle05 {
 5     width: 0;
 6     height: 0;
 7     border: 60px solid transparent;
 8     border-bottom: 130px solid pink;
 9   }
10 
11 图二：
12 <div class="triangle06" />
13 
14   .triangle05 {
15     width: 0;
16     height: 0;
17     border: 100px solid transparent;
18     border-bottom: 130px solid pink;
19   }
20 
21 图三：
22 <div class="triangle07" />
23 
24   .triangle05 {
25     width: 0;
26     height: 0;
27     border: 130px solid transparent;
28     border-bottom: 130px solid pink;
29   }

 

 

 

 1 图一：
 2  <div class="triangle-topleft" />
 3 
 4   .triangle-topleft {
 5     width: 0;
 6     height: 0;
 7     border-top: 100px solid yellow;
 8     border-right: 100px solid transparent;
 9   }
10 
11 
12 图二：
13  <div class="triangle-topright" /> 
14 
15   .triangle-topright {
16     width: 0;
17     height: 0;
18     border-top: 100px solid yellow;
19     border-left: 100px solid transparent;
20   }
21 
22 
23 图三：
24  <div class="triangle-bottomleft" />
25 
26   .triangle-bottomleft {
27     width: 0;
28     height: 0;
29     border-bottom: 100px solid yellow;
30     border-right: 100px solid transparent;
31   }
32 
33 
34 图四：
35  <div class="triangle-bottomright" />
36 
37   .triangle-bottomright {
38     width: 0;
39     height: 0;
40     border-bottom: 100px solid yellow;
41     border-left: 100px solid transparent;
42   }

 

  •  箭头三角形

 1 <div class="arrow top" />   // 第一个
 2 <div class="arrow right" />   // 第二个
 3 <div class="arrow bottom" />  //  第三个
 4 <div class="arrow left" />   //  第四个
 5 
 6 
 7   .arrow {
 8     display: inline-block;
 9     margin-right: 50px;
10     width: 0;
11     height: 0;
12     border: 26px solid;
13     border-color: transparent #cddc39 transparent transparent;
14     position: relative;
15   }
16 
17   .arrow::after {
18     content: '';
19     position: absolute;
20     /* 通过位移覆盖背景 */
21     right: -30px;
22     top: -26px;
23     border: 26px solid;
24     border-color: transparent #fff transparent transparent;
25   }
26 
27   .arrow.top {
28     transform: rotate(90deg);
29     margin-bottom: 100px;
30   }
31 
32   .arrow.right {
33     transform: rotate(0deg);
34     margin-bottom: 100px;
35   }
36 
37   .arrow.bottom {
38     transform: rotate(270deg);
39     margin-bottom: 100px;
40   }
41 
42   .arrow.left {
43     transform: rotate(180deg);
44     margin-bottom: 100px;
45   }

 

posted @ 2021-12-08 18:18  Naynehcs  阅读(58)  评论(0)  编辑  收藏  举报