- 三角形
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;
}
- 平行四边形
<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