`
piperzero
  • 浏览: 3473604 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
文章分类
社区版块
存档分类
最新评论

css绘画三角形,实现一些图形

 
阅读更多

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 ;
}


分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics