常用的css样式-使用伪类制作箭头

最新推荐文章于 2023-04-19 15:51:12 发布

weixin_43817873

最新推荐文章于 2023-04-19 15:51:12 发布

阅读量962

点赞数

分类专栏： css 文章标签： css 伪类

本文链接：https://blog.csdn.net/weixin_43817873/article/details/103260992

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

常用的css样式-使用伪类制作箭头

1.css中使用伪类制作箭头(效果如下)

在这里插入图片描述

	div{
	 position: relative;
	}
	div::after{
	  content: "";
	  position: absolute;
	  bottom: 0;
	  left: 0;
	  display: block;
	  background: #F2F1EF;
	  width: 100%;
	  height: 20upx;
	}

2.css中使用伪类制作箭头(效果如下)

在这里插入图片描述
html代码

<body>
    <div class="c-main"></div>  
</body>

css代码

.c-main{ 
	position:relative;//必须要写! 
	width:400px; 
	height:400px; 
	border：1px solid #000; 
} 
/使用伪类制作箭头/ 
.c-main:before{ 
	content: ”; 
	border-top: 9px solid transparent;/方框上部分背景颜色为透明/ 
	border-bottom: 9px solid transparent;/方框下部分背景为透明/ 
	border-right: 9px solid #000;/箭头背景颜色/ 
	position: absolute;/绝对定位1/ 
	top: 25px;/距离顶部位置偏移量2/ 
	left: -9px;/距离左边位置偏移量3/ /123都是控制显示位置的/ 
} 
.c-main:after{ 
	content: ”; 
	border-top: 7px solid transparent; 
	border-bottom: 7px solid transparent; 
	border-right: 7px solid #fff;/箭头背景颜色，覆盖前面的#eee颜色，使其颜色与整体颜色一致/ 
	position: absolute; 
	top: 27px; 
	left: -7px;//这里的top:27px，left:-7px是为了遮盖住.c-main:before生成的箭头，使箭头边框呈现颜色 
}

weixin_43817873

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
常用的css样式-使用伪类制作箭头

常用的css样式-使用伪类制作箭头1.css中使用伪类制作箭头(效果如下) div{ position: relative; } div::after{ content: ""; position: absolute; bottom: 0; left: 0; display: block; background: #F2F1EF; width...
复制链接

扫一扫