css实现三角形，div实现三角形缺口

1、css实现三角形

有时候面试题或者日常需求中会有用纯css来实现三角形的例子，目前本人的知识量只能提供两种方案

首先是第一种，也是最常用的就是border法

1-1 border实现三角形

div{
      border:40px solid;
      border-left-color: lightslategrey;
      border-right-color: lightcoral;
      border-top-color: lawngreen;
      border-bottom-color: lightgreen;
      box-sizing: border-box;
      width: 40px;
}

效果如下，如果你想要某一个方向的三角形，其他角度的颜色设置为透明就可以

比如我只想要粉色的三角形

/*顺序分别是上右下左*/
border-color: transparent lightcoral transparent transparent;

1-2 通过linear-gradient()来实现三角形

div{
  width: 50px;
  height: 50px;
  background: linear-gradient(-45deg, red 50%, transparent 50% ) ;
}

效果图如下：

那么就简单介绍一下 linear-gradient() 是css当中background的渐变函数

他的第一个参数是指你开始的角度，角度图我从网上找了一个示意图，-45deg就代表就右下角到左上角，135deg就代表是左上角到右下角，你也可以直接指定方向（left/right/top/bottom to left/right/top/bottom ）

第二个参数是指定颜色，一般肯定是多个颜色的，因为要实现一个渐变的效果后面的50%，可写可不写，写了就代表红色占了50%，这里划重点！！如果你第二个参数中的百分比，第一个参数大于等于第二个参数百分比，就不会出现渐变，比如

  {
    background: linear-gradient(-45deg, red 50%, blue 50% ) ;
  }

因为每个元素占据了50%=50%，所有中间没有渐变效果，但是！


  {
    background: linear-gradient(-45deg, red 20%, blue 50% ) ;
  }

就会出现渐变了

2、div实现缺角就是使用第三种方法

 width: 200px;
 height: 50px;
 background: linear-gradient(-45deg, transparent 20px, blue 0 ) ;

css实现三角形，div实现三角形缺口

猜你喜欢