- 三角形
文章图片
代码如下
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;
}- 平行四边形
上海效果如图
文章图片
都看到了，由于是让整个父标签div做了倾斜，文字也发生了倾斜，所以，为了让文字立正，就要加一个子标签给文字包住像这样子
上海
这样子子div就会立正了，哈哈。
http://codepen.io/anon/pen/jbQPRR
