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 ) ;