css-css实现三角绘制

• 下面代码利用border绘制四个等腰三角形

• 第二步,去掉border-left;可以看到只要去掉去掉border-top和border-bottom的颜色就是一个向左三角

• 第三步 border-top和border-bottom的颜色设为透明

三角就绘制完成,接下来是展示分别绘制上下左右的三角:

控制边长:

用向上三角举例:

  border-bottom: 50px solid blue; // 50px上点到底边中点距离

  border-right: 50px solid transparent; // 50px,左点到底边中点的距离

  border-left: 50px solid transparent; // 50px,右点到底边中点的距离

带阴影

其他方法: