关于css三角形的制作

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

原创最新推荐文章于 2024-04-23 14:33:07 发布 · 424 阅读

0 ·

CC 4.0 BY-SA版权

css 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一种使用CSS创建三角形的方法，通过调整元素的宽高和边框颜色，实现不同样式三角形的设计。

网页中三角形使用的地方很多，比如弹出的消息对话框的小箭头、网站后台的聊天弹框。

制作三角形我们可以有两种方法，一种是通过美工处理，将三角形制作出来，然后通过设置背景图片，如前一篇所提到的sprite图的制作。今天去面试的时候帮面试公司调试意外得到经验，同一行的inline-block元素我们可以通过改变margin的值可以是的两个图片任意连接。下面以正方形为例，一会讲解三角形。

<!DOCTYPE>
<html lang="zh-CN">
<head>
<title>网页</title>
<meta http-equiv="Content-Type" content=" charset=utf-8" />
<style>
	div{
	height: 150px;
	width: 150px;
	background: #456789;
	margin: 200px;

	}
	.span1{
	float: left;
	width: 115px;
	height: 115px;
	background: #000fff;
	text-align: center;
	line-height: 115px;
	}
	.span2{
	float: left;
	width: 25px;
	height: 25px;
	background: #fff000;
	margin-left: -50px;
	margin-top: -25px;
	text-align: center;
	line-height: 25px;
	}



</style>
</head>
    <body>
    	<div>
    	  <span class="span1">11</span><span class="span2">22</span>	
    	</div>
    </body>
</html>

这是让小方格放到大方格的上面↑

<!DOCTYPE>
<html lang="zh-CN">
<head>
<title>网页</title>
<meta http-equiv="Content-Type" content=" charset=utf-8" />
<style>
	div{
	height: 150px;
	width: 150px;
	background: #456789;
	margin: 200px;

	}
	.span1{
	float: left;
	width: 115px;
	height: 115px;
	background: #000fff;
	text-align: center;
	line-height: 115px;
	}
	.span2{
	float: left;
	width: 25px;
	height: 25px;
	background: #fff000;
	margin-left: -140px;
	text-align: center;
	line-height: 25px;
	}



</style>
</head>
    <body>
    	<div>
    	  <span class="span1">11</span><span class="span2">22</span>	
    	</div>
    </body>
</html>

小正方形又跑到了大正方形的上面 ↑

这就是利用float属性和margin属性改变位置。

下面讲解如何制作三角形，首先我们知道，一个块元素是由padding、margin、border和设置的宽高决定的。一个块元素的大小也是这么决定的，对于两个inline-block元素，增加一个元素的border、padding、margin值就会使得行高变化，使整个行发生变化。

设置块大小是个25x25，border是个5px；

<pre name="code" class="html"><!DOCTYPE>
<html lang="zh-CN">
<head>
<title>网页</title>
<meta http-equiv="Content-Type" content=" charset=utf-8" />
<style>
	div{
	height: 150px;
	width: 150px;
	background: #456789;
	margin: 200px;

	}
	.span1{
	float: left;
	width: 115px;
	height: 115px;
	background: #000fff;
	text-align: center;
	line-height: 115px;
	}
	.span2{
	float: left;
	width: 25px;
	height: 25px;
	
	border-top: 5px solid green;
	border-left: 5px solid red;
	border-bottom: 5px solid blue;
	border-right: 5px solid pink; 
	}



</style>
</head>
    <body>
    	<div>
    	  <span class="span1">11</span><span class="span2">22</span>	
    	</div>
    </body>
</html>

当逐渐增大border宽度

<!DOCTYPE>
<html lang="zh-CN">
<head>
<title>网页</title>
<meta http-equiv="Content-Type" content=" charset=utf-8" />
<style>
	div{
	height: 150px;
	width: 150px;
	background: #456789;
	margin: 200px;

	}
	.span1{
	float: left;
	width: 115px;
	height: 115px;
	background: #000fff;
	text-align: center;
	line-height: 115px;
	}
	.span2{
	float: left;
	width: 25px;
	height: 25px;
	
	border-top: 25px solid green;
	border-left: 25px solid red;
	border-bottom: 25px solid blue;
	border-right: 25px solid pink; 
	}



</style>
</head>
    <body>
    	<div>
    	  <span class="span1">11</span><span class="span2">22</span>	
    	</div>
    </body>
</html>

当设置块的大小为0时，变为四个三角形

<!DOCTYPE>
<html lang="zh-CN">
<head>
<title>网页</title>
<meta http-equiv="Content-Type" content=" charset=utf-8" />
<style>
	div{
	height: 150px;
	width: 150px;
	background: #456789;
	margin: 200px;

	}
	.span1{
	float: left;
	width: 115px;
	height: 115px;
	background: #000fff;
	text-align: center;
	line-height: 115px;
	}
	.span2{
	float: left;
	width: 0px;
	height: 0px;
	border-top: 25px solid green;
	border-left: 25px solid red;
	border-bottom: 25px solid blue;
	border-right: 25px solid pink; 
	}



</style>
</head>
    <body>
    	<div>
    	  <span class="span1">11</span><span class="span2">22</span>	
    	</div>
    </body>
</html>

所以当把左右的border的颜色设置为透明的时候，就会产生三角形

<!DOCTYPE>
<html lang="zh-CN">
<head>
<title>网页</title>
<meta http-equiv="Content-Type" content=" charset=utf-8" />
<style>
	div{
	height: 150px;
	width: 150px;
	background: #456789;
	margin: 200px;

	}
	.span1{
	float: left;
	width: 115px;
	height: 115px;
	background: #000fff;
	text-align: center;
	line-height: 115px;
	}
	.span2{
	float: left;
	width: 0px;
	height: 0px;
	border-top: 25px solid green;
	border-left: 25px solid transparent;
	/*border-bottom: 25px solid blue;*/
	border-right: 25px solid transparent; 
	}



</style>
</head>
    <body>
    	<div>
    	  <span class="span1">11</span><span class="span2">22</span>	
    	</div>
    </body>
</html>