利用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>
效果如图：
