使用::before与::after伪元素插入图标

15 篇文章 0 订阅

效果图:
在这里插入图片描述

hpu.ico在这里插入图片描述

同一目录下:
在这里插入图片描述

源码:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>before-after</title>
	<style>
	div{margin:50px;}
	div::before{
		content:url(hpu.ico);
		position:relative;
		bottom:-10px;
		left:-10px;
	}
	div::after{
		content:"";
		width: 0px;
		height: 0px;
		display: inline-block;
		border:10px solid transparent;
		border-bottom:20px solid red;
		position: relative;
		bottom:-8px;
		left:10px;

	}
	p{margin:50px;
		  width:200px;
		  height:50px;
		  background:green;
		  border-radius: 5px;

      }
      p::after{
      	content:"";
      	width: 0px;
      	height: 0px;
      	display:inline-block;
      	border:12px solid transparent;
      	border-top:12px solid green;
      	position:relative;
      	bottom:-50px;
      	left:85px;
      	
      }
	
	</style>
</head>
<body>
	<div>河南理工大学计算机学院</div>
	<p></p>
</body>
</html>

可以通过borderborder-bottomborder-radiusborder-top等控制图标的形状。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值