[分享]css上三角代码

CSS上三角代码是一种常见的UI元素设计。它可以用来强调页面中的特定内容，如导航菜单、下拉列表等。下面将介绍几种CSS生成三角的方式。1. 使用border属性 .triangle { border...

CSS上三角代码是一种常见的UI元素设计。它可以用来强调页面中的特定内容，如导航菜单、下拉列表等。下面将介绍几种CSS生成三角的方式。

1. 使用border属性

 <div class="triangle"></div>

    .triangle {
      border-top: 60px solid red;
      border-left: 60px solid transparent;
      height: 0;
      width: 0;
} 

2. 使用transform属性

 <div class="triangle"></div>

    .triangle {
      width: 100px;
      height: 100px;
      background: blue;
      transform: rotate(45deg);
    } 

3. 使用伪元素:before

 <div class="triangle"></div>

    .triangle {
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 0 50px 50px 50px;
      border-color: transparent transparent white transparent;
    } 

4. 使用伪元素:after

 <div class="triangle"></div>

    .triangle {
      position: relative;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 0 50px 50px 50px;
      border-color: transparent transparent white transparent;
    }
    
    .triangle:after {
      content: ';
      display: block;
      position: absolute;
      top: -49px;
      left: -50px;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 0 50px 50px 50px;
      border-color: transparent transparent blue transparent;
    } 

以上是几种常见的CSS生成三角的方法。当然还有其他的方式，如使用svg图形等，视需求而定。掌握好这些技巧，就可以运用它们来达到设计效果。