用CSS代码绘制三角形纯CSS绘制三角形的代码

最新推荐文章于 2024-04-23 14:33:07 发布

覆水难收。

最新推荐文章于 2024-04-23 14:33:07 发布

阅读量1.2k

点赞数

分类专栏： html 文章标签： css html 三角形

本文链接：https://blog.csdn.net/personbing/article/details/51713609

版权

html 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

这段时间想用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相同即可
附源代码：

<!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>

覆水难收。

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用CSS代码绘制三角形纯CSS绘制三角形的代码

这段时间想用css写出如下的三角形经查阅可以使用div的border实现，将div的高度和宽度设置为0然后设置该div的border的大小，和颜色即可显示出如图的样式1、新建一个元素，如果行内元素就display:block它。2、把它的宽高设置为height:0px; width:0px;3、设置边框border属性，用来实现三角形。可以用如下的的css代码
复制链接

扫一扫