【HUI】triangles in css2(使用css2制作各种三角形及组合图形)

最新推荐文章于 2022-05-13 14:55:54 发布

LearnShare

最新推荐文章于 2022-05-13 14:55:54 发布

阅读量2.4k

点赞数 2

分类专栏： Web前端（HTML/CSS） HUI JavaScript/jQuery

本文链接：https://blog.csdn.net/sdlyhjq/article/details/8292753

版权

Web前端（HTML/CSS）同时被 3 个专栏收录

6 篇文章 0 订阅

订阅专栏

HUI

5 篇文章 0 订阅

订阅专栏

JavaScript/jQuery

5 篇文章 0 订阅

订阅专栏

文章来自LearnShare，转载请注明。

三角形及各种组合图形是web前端经常用到的图形，利用css2的边框属性即可制作多种三角形，大大减少了设计师和前端的工作量。

边看 demo，边解释一下原理：

使用四种颜色的边框

HTML代码：

<!-- 
* Widget: HUI.ToolTips.CSSTriangle.demo
* Version: 0.1 V (@2012-12-13)
* Author: H-Labs (LearnShare)
 -->
<!DOCTYPE html>
<html>
	<head>
		<title>CSSTriangle demo</title>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
		<link rel="stylesheet" type="text/css" href="./style/main.css" />
	</head>
	<body>
		<h2>triangles in css2[demo]</h2>
		<div class="triangle" id="t0"></div>
	</body>
</html>

CSS代码：

/**
* Widget: HUI.ToolTips.CSSTriangle.demo
* Version: 0.1 V (@2012-12-13)
* Author: H-Labs (LearnShare)
*/
body{
	margin:0px;
	background-color:#EEF;
}
.triangle{
	width:0px;
	height:0px;
	margin-top:30px;
	margin-left:20px;
	border:solid 40px #333;
	float:left;
}
#t0{
	border-top-color:#FFF;
	border-right-color:#000;
	border-bottom-color:#555;
	border-left-color:#AAA;
}

代码解析：

首先定义了：

<div class="triangle" id="t0"></div>

设定宽度和高度均为0：

.triangle{
	width:0px;
	height:0px;
}

然后定义40像素宽的边框，颜色为 #333：

.triangle{
	border:solid 40px #333;
}

最后分别设定了四个边框的颜色：

#t0{
	border-top-color:#FFF;
	border-right-color:#000;
	border-bottom-color:#555;
	border-left-color:#AAA;
}

demo就这么简单。

最终的效果：CSSTriangle

效果图：

文章来自LearnShare，转载请注明。

LearnShare

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【HUI】triangles in css2(使用css2制作各种三角形及组合图形)

文章来自LearnShare，转载请注明。三角形及各种组合图形是web前端经常用到的图形，利用css2的边框属性即可制作多种三角形，大大减少了设计师和前端的工作量。边看 demo，边解释一下原理：使用四种颜色的边框HTML代码：<!-- * Widget: HUI.ToolTips.CSSTriangle.demo* Version: 0.1
复制链接

扫一扫