css小技巧

利用border实现三角形和平行四边形

.test{
  width: 0;
  height: 0;
  margin: 50px;
  border-style: solid;
  border-width: 24px;
  border-color: red blue green yellow;
}

<div class="test"></div>

效果如图：

三角形的实现利用了上面的方法。

.test{
  width: 0;
  height: 0;
  margin: 50px;
  border-style: solid;
  border-width: 24px;
  border-color: red blue green yellow;
}

效果如图：

.triangle{
  position: relative;
  padding: 0 10px;
  display: inline-block;
  height: 24px;
  line-height: 24px;
  background: blue;
  color: #fff;
}
.triangle:after{
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 12px 6px; 
  position: absolute;
  top: 0;
  right: -12px;
  border-color: blue transparent transparent blue;
}
.triangle:before{
  position: absolute;
  display: block;
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 12px 6px; 
  top: 0;
  left: -12px;
  border-color: transparent blue blue transparent;
}

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

效果如图：

.outer{
  display: inline-block;
  padding: 5px 20px;
  border: 1px solid blue;
  transform: skew(-20deg);
}
.inner{
  transform: skew(20deg);
}

<div class="outer">
  <div class="inner">北京</div>
</div>

效果如图：