【html5/css3】用伪类来生成箭头

最新推荐文章于 2024-08-27 19:20:10 发布

@Umbrella

最新推荐文章于 2024-08-27 19:20:10 发布

阅读量1.1k

点赞数

分类专栏：【html5/css3】文章标签： css3

原文链接：https://blog.csdn.net/Allenyhy/article/details/81631813

版权

【html5/css3】专栏收录该内容

26 篇文章 0 订阅

订阅专栏

1、箭头类型1

原理

在这里插入图片描述

如图所示：我们可以利用::before和::after生成一个正方形框（用边框即可），接着将框旋转45度就是箭头的形状了！

具体代码如下所示：

.icon-share {
    .....             /*这里的点点点代表具体情况，具体属性*/
    position: relative;
}
.icon-back::before{
    content: "";
    width: 12px;
    height: 12px;
    border:  solid #fff;
    border-width: 1px 0 0 1px;
    transform: translate(-50%, -50%) rotate(-45deg);
    position: absolute;
    left: 50%;
    top: 50%;
}

效果如下图所示：
在这里插入图片描述

1、箭头类型2

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生成的箭头，使箭头边框呈现颜色/
}