css 制作三角形/平行四边形

1. 三角形

css制作三角形如图
代码如下

<div id="first"></div>
<div id="second"></div>
<div id="third"></div>

div {
  display: inline-block;
  margin: 20px 0 0 20px;
}

#first {
    width: 20px;
    height: 20px;
    border-width: 10px;
    border-style: solid;
    border-color: red green blue brown;
}

#second {
    width: 0;
    height: 0;
    border-width: 10px;
    border-style: solid;
    border-color: red green blue brown;
}

#third {
    width: 0;
    height: 0;
  border-style: solid;
    border-width: 10px;
    border-color: red transparent transparent transparent;
}

1. 平行四边形

<style>
.city {
  display: inline-block;
  padding: 5px 20px;
  border: 1px solid #44a5fc;
  color: #333;
  transform: skew(-20deg);
}
</style>

<div class="city">上海</div>

效果如图

都看到了，由于是让整个父标签div做了倾斜，文字也发生了倾斜，所以，为了让文字立正，就要加一个子标签给文字包住像这样子

<style>
.city {
  display: inline-block;
  padding: 5px 20px;
  border: 1px solid #44a5fc;
  color: #333;
  transform: skew(-20deg);
}

.city div {
  transform: skew(20deg);
}
</style>

<div class="city">
  <div>上海</div>
</div>

这样子子div就会立正了，哈哈。
http://codepen.io/anon/pen/jbQPRR