css下拉列表的三角形写法

时间：6年前阅读：4599

三角形写法

<!DOCTYPE html>    
<html>    
	<head>    
		<meta charset="UTF-8">    
		<title></title>    
		<style type="text/css">    
			*{    
				padding:0;    
				margin: 0;    
			}    
			.dd{    
				width: 0;    
				height: 0;    
				margin: 50px auto;    
				/*这个是画向下的三角形,设左右和下的长度,上面为0不设,就显示成三角形了*/    
				border-left: 50px solid darkcyan;    
				border-right: 50px solid plum;    
				border-top: 100px solid black;    
			}    
			.san{    
				width: 0;    
				height: 0;    
				margin: 100px auto;    
				/*这个是画向下的三角形,设左右和下的长度,上面为0不设,就显示成三角形了*/    
				border-left: 50px solid transparent;    
				border-right: 50px solid transparent;    
				border-top: 100px solid black;    
			}    
		</style>    
	</head>    
	<body>    
		<div class="dd"></div>    
		<div class="san"></div>    
	</body>    
</html>

上面代码效果图片

本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。

微信扫码关注

更新实时通知

css下拉列表的三角形写法

网友评论