使用纯CSS创建三角形形状

如何在页面中实现三角形，有以下几种方式；

一、使用css绘制三角形

HTML代码：

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

CSS代码：

（1）箭头向上

.triangle {
  width: 0;
  height: 0;
  border-bottom: 20px solid #333;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
}

（2）箭头向右

.triangle {
  width: 0;
  height: 0;
  border-left: 20px solid #333;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
}

（3）箭头向下

.triangle {
  width: 0;
  height: 0;
  border-top: 20px solid #333;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
}

（4）箭头向左

.triangle {
  width: 0;
  height: 0;
  border-right: 20px solid #333;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
}

（5）箭头向右上

.triangle {
  width: 0;
  height: 0;
  border-right: 20px solid #333;
  border-left: 20px solid transparent;
  border-bottom: 20px solid transparent;
}

（6）箭头向右下

.triangle {
  width: 0;
  height: 0;
  border-right: 20px solid #333;
  border-left: 20px solid transparent;
  border-top: 20px solid transparent;
}

（7）箭头向左下

.triangle {
  width: 0;
  height: 0;
  border-left: 20px solid #333;
  border-right: 20px solid transparent;
  border-top: 20px solid transparent;
}

（8）箭头向左上

.triangle {
  width: 0;
  height: 0;
  border-left: 20px solid #333;
  border-right: 20px solid transparent;
  border-bottom: 20px solid transparent;
}

颜色调整更改#333，更改为合适颜色。

二、使用图片

图片方式就是由美工设计并制作，利用css代码通过背景图片来实现

实例图片：

示例代码

HTML：

<div id="box"></div>

CSS：

#box{
    width: 400px;
    height: 300px;
    border:solid 2px #999;
    border-radius: 5px;
    margin:0 auto;
    background:url('./ershisi.png');
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: 30px 30px;
}