css三角形背景怎么做

CSS三角形背景可以让网站界面变得更加生动有趣，那么这些三角形是如何实现的呢？下面我们来一起探讨一下。

/*先定义一个容器*/
.container{
  position: relative;
  width: 100px;
  height: 100px;
  background-color: #fff;
}

/*下面是定义三角形*/
.container::before{
  content: ';
  position: absolute;
  width: 0;
  height: 0;
  border-width: 20px;/*改变这里的数值可以控制三角形大小*/
  border-color: transparent transparent #000 transparent;
  border-style: dashed dashed solid dashed;
  left: 0;
  top: 0;
} 

以上代码就是实现三角形背景最基本的方法了。通过伪元素的方式，在容器上加上一个“before”的子元素。其中，内容使用空字符串来表示。然后再定义宽度为0、高度为0的边框，其中指定边框颜色为黑色，其他地方用透明色来实现。使用border-style来指定边框的样式，这里使用“实线-实线-虚线-实线”的方式来绘制三角形。最后用left和top属性来调整三角形的位置。

当然，也可以在:before中定义其他属性来实现更加丰富的三角形效果。比如，我们可以将三角形变为实心，只需要将border-style改为solid即可。还可以指定border-right-color和border-left-color属性来分别指定右边和左边的边框颜色，达到类似海绵宝宝裤子上的蓝色装饰的效果。

综上所述，CSS三角形背景是一种非常实用且简单的装饰效果。只要通过border-style可以灵活的改变三角形边框样式，这样可以让我们在网站设计上更加有创意，实现更多有趣的效果。