CSS之三角形

最新推荐文章于 2024-05-24 10:29:27 发布

无区新手

最新推荐文章于 2024-05-24 10:29:27 发布

阅读量111

点赞数

分类专栏： HTML+CSS

原文链接：https://www.cnblogs.com/monozxy/articles/7903019.html

版权

HTML+CSS 专栏收录该内容

33 篇文章 3 订阅

订阅专栏

原文地址：https://www.cnblogs.com/monozxy/articles/7903019.html

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>Document</title>
		<style>
			.sanjiao_border:before,
			.sanjiao_border .before {
				/*.before为ie6下用到*/
				content: '';
				/*伪类下的属性*/
				display: block;
				position: absolute;
				top: 0px;
				left: 150px;
				width: 0;
				height: 0;
				overflow: hidden;
				font-size: 0;
				/*是因为, 虽然宽高度为0, 但在IE6下会具有默认的 */
				line-height: 0;
				/* 字体大小和行高, 导致盒子呈现被撑开的长矩形 */
				border: 10px;
				border-style: dashed dashed solid dashed;
				border-color: transparent transparent #f30 transparent;
			}

			.sanjiao_border:after,
			.sanjiao_border .after {
				/*.after为ie6下用到*/
				content: '';
				/*伪类下的属性*/
				display: block;
				width: 0;
				height: 0;
				overflow: hidden;
				font-size: 0;
				/*是因为, 虽然宽高度为0, 但在IE6下会具有默认的 */
				line-height: 0;
				/* 字体大小和行高, 导致盒子呈现被撑开的长矩形 */
				border: 9px;
				border-style: dashed dashed solid dashed;
				border-color: transparent transparent #fff transparent;
				position: absolute;
				left: 151px;
				top: 2px;
			}
		</style>
	</head>
	<div class="box sanjiao_border">
		<!--ie6下需用，非ie6无需-->
		<i class="before"></i>
		<i class="after"></i>
	</div>
	<body>

	</body>

</html>

无区新手

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS之三角形

原文地址：https://www.cnblogs.com/monozxy/articles/7903019.html<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device...
复制链接

扫一扫

专栏目录