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