css繪畫三角形,實現一些圖形
阿新 • • 發佈:2019-02-19
html程式碼如下:<div class="circle"></div>
主要用css的border屬性來實現高度和寬度設定為0;line-height和font-size也設定為0,主要是解決ie6中容易被撐開的不相容性問題
第一種斜邊在盒子的邊上
css程式碼如下
.circle {
width:0;
height:0;
border:39px solid #000;
border-color:#FF0000 transparent transparent transparent;
border-style:solid dashed dashed dashed;
line-height:0;
font-size:0;
}
由於ie6不支援透明,所以樣式裡面用dashed來解決不透明問題
執行結果如下圖:
第二種是斜邊在盒子的對角線上
.circle {
height: 0;
width: 0;
overflow: hidden;
font-size: 0;
line-height: 0;
border-color: #FF9600 #3366ff transparent transparent;
border-style: solid solid dashed dashed;
border-width: 40px 40px 0 0 ;
}