css实现三角箭头

HTML代码

<div class="arrow1">上箭头</div>
<div class="arrow2">下箭头</div>
<div class="triangle1">左实心三角</div>
<div class="triangle2">右实心三角</div>

CSS代码

/*各个部分样式*/

@charset "utf-8";
.wrapper {
  width: 100%;
  height: 100%;
  padding: 50px;
}

div {
  width: 108px;
  margin: 30px auto;
  position: relative;
  font-size: 16px;
}
/*----上箭头----*/
.arrow1:before {
  position: absolute;
  right: 20px;
  top: 50%;
  width: 12px;
  height: 12px;
  margin-top: -2px;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
  -webkit-transform: rotate(225deg);
  content: '';
}
/*----下箭头----*/
.arrow2:before {
  position: absolute;
  right: 20px;
  top: 5px;
  width: 12px;
  height: 12px;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  content: '';
}
/*----左实心三角----*/
.triangle1 {
  display:block;
  width: 0;
  height: 0;
  overflow: hidden;
  margin: 20px auto;
  line-height: 0;
  font-size: 0;
  vertical-align: middle;
  border-right: 10px solid red;
  border-left: 0 none;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  _color: #FF3FFF;
  _filter: chroma(color=#FF3FFF);
}
/*----右实心三角----*/
.triangle2 {
  display: block;
  margin: 20px auto;
  width: 0;
  height: 0;
  overflow: hidden;
  line-height: 0;
  font-size: 0;
  vertical-align: middle;
  border-left: 10px solid red;
    border-right: 0 none;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  _color: #FF3FFF;
  _filter: chroma(color=#FF3FFF);
}