用CSS代码绘制三角形 纯CSS绘制三角形的代码
2016-06-19 19:45
513 查看
这段时间想用css写出如下的三角形
经查阅可以使用div的border实现,将div的高度和宽度设置为0然后设置该div的border的大小,和颜色即可显示出如图的样式
1、新建一个元素,如果行内元素就display:block它。
<div class="triangle"></div>
2、把它的宽高设置为height:0px; width:0px;
3、设置边框border属性,用来实现三角形。
可以用如下的的css代码
.triangle{
display:inline;
height:0px;
width:0px;
border:100px solid #000;
border-color:transparent transparent transparent #00A5A5;
border-style:solid solid solid dashed;
line-height:0px;
}
注:其中transparent是设置哪部分为透明的属性,IE6中不支持transparent则可以设置border-style:solid dashed dashed dashed;其中dashed为设置那部分透明和上边的border-color相同即可
附源代码:
经查阅可以使用div的border实现,将div的高度和宽度设置为0然后设置该div的border的大小,和颜色即可显示出如图的样式
1、新建一个元素,如果行内元素就display:block它。
<div class="triangle"></div>
2、把它的宽高设置为height:0px; width:0px;
3、设置边框border属性,用来实现三角形。
可以用如下的的css代码
.triangle{
display:inline;
height:0px;
width:0px;
border:100px solid #000;
border-color:transparent transparent transparent #00A5A5;
border-style:solid solid solid dashed;
line-height:0px;
}
注:其中transparent是设置哪部分为透明的属性,IE6中不支持transparent则可以设置border-style:solid dashed dashed dashed;其中dashed为设置那部分透明和上边的border-color相同即可
附源代码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> *{ margin:0px; padding:0px;} .triangle{ display:inline; height:0px; width:0px; border:100px solid #000; border-color:transparent transparent transparent #00A5A5; border-style:solid solid solid dashed; line-height:0px; float:left; } .fang{ display:inline; height:0px; width:0px; border:100px solid #000; border-color:#00A5A5 #00A5A5 #00A5A5 #00A5A5; border-style:solid solid solid solid; line-height:0px; float:left; } </style> </head> <body> <div> <div class="fang">demodemo</div> <div class="triangle"></div> </div> </body> </html>
相关文章推荐
- Web布局连载——两栏固定布局(五)
- [div+css]晒晒最新制作专题推广页模板
- 在Windows 8.1的IE 11中屏蔽双击放大功能
- 盒子模型
- CSS选择器
- CSS样式优先权
- HTML5调用摄像头实例
- Powershell 创建炫丽美观的Html报表
- [css] line-height 百分比单位和数值单位的区别
- Apple官网研究之使用Justify布局导航
- 关于前端的思考与感悟
- rem : web app适配的秘密武器
- jquery高级应用之Deferred对象
- 又被事件冒泡坑了一把,这次要彻底弄懂浏览器的事件流
- 设计更快的网页(三):字体和 CSS 调整
- 纯CSS制作的新闻网站中的文章列表