用纯Css作三角形
<style>
//向上三角形
.triangle_up{
width:0;
height:0;
border-left:30px solid transparent;
border-right:30px solid transparent;
border-bottom:30px solid red;
}
//向下三角形
.triangle_up{
width:0;
height:0;
border-left:30px solid transparent;
border-right:30px solid transparent;
border-top:30px solid red;
}
//向左三角形
.triangle_up{
width:0;
height:0;
border-top:30px solid transparent;
border-bottom:30px solid transparent;
border-right:30px solid red;
}
//向右三角形
.triangle_up{
width:0;
height:0;
border-top:30px solid transparent;
border-bottom:30px solid transparent;
border-left:30px solid red;
}
</style>
<body>
<div class="triangle_up"></div>
<div class="triangle_down"></div>
<div class="triangle_left"></div>
<div class="triangle_right"></div>
</body>
綜上所述:你所要的三角形朝向是跟代碼所寫是對立的。比如:朝上的三角形,你就得用border-bottom;朝左,你就得用border-right;如此。。。
轉載于:https://www.cnblogs.com/fkcqwq/p/5445405.html
總結
- 上一篇: linux配置oracle11G监听及本
- 下一篇: 分区格式化/挂载数据盘