CSS--实现小三角形
<style>
html, body {
margin: 0;
padding: 0;
}
/*下面用CSS3分別實現向上、下、左、右的三角形*/
.btn-color{
color: #622CB9;
}
/*箭頭向上*/
.arrow-up {
0;
height:0;
border-left:100px solid transparent;
border-right:100px solid transparent;
border-bottom:100px solid #089EF1;
}
/*箭頭向右*/
.arrow-right {
0;
height:0;
border-top:100px solid transparent;
border-bottom: 100px solid transparent;
border-left: 100px solid green;
}
/*箭頭向下*/
.arrow-down {
0;
height:0;
border-left:100px solid transparent;
border-right:100px solid transparent;
border-top:100px solid #F8071D;
}
/*箭頭向左*/
.arrow-left {
0;
height:0;
border-top:100px solid transparent;
border-bottom:100px solid transparent;
border-right:100px solid #F804EF;
}
/*箭頭直角左上角*/
.r-angle-left-up{
0;
height:0;
border-bottom: 200px solid transparent;
border-left: 200px solid #0F05FC;
}
/*箭頭直角右上角*/
.r-angle-right-up{
0;
height:0;
border-bottom:200px solid transparent;
border-right: 200px solid #622CB9;
}
/*箭頭直角右下角*/
.r-angle-right-down{
0;
height:0;
border-top:200px solid transparent;
border-right:200px solid #008051;
}
/*箭頭直角左下角*/
.r-angle-left-down{
0;
height:0;
border-top:200px solid transparent;
border-left: 200px solid #B35708;
}
</style>
<body>
<!--等腰三角-->
<div class="arrow-up btn-color"><!--向上的三角--></div>
<div class="arrow-right btn-color"><!--向右的三角--></div>
<div class="arrow-down btn-color"><!--向下的三角--></div>
<div class="arrow-left btn-color"><!--向左的三角--></div>
<!--直角三角-->
<div class="r-angle-left-up btn-color"><!--左上角的直角三角--></div>
<div class="r-angle-right-up btn-color"><!--右上角的直角三角--></div>
<div class="r-angle-right-down btn-color"><!--右下角的直角三角--></div>
<div class="r-angle-left-down btn-color"><!--左下角的直角三角--></div>
</body>
總結
以上是生活随笔為你收集整理的CSS--实现小三角形的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 我刚提了一汽丰田卡罗拉，想问下对于车辆的
- 下一篇： 一公里油费多少钱(上下班一天30公里油费