【css】用两个伪类选择器实现带阴影的对话框

最新推荐文章于 2022-10-08 16:09:02 发布

sakoooo

最新推荐文章于 2022-10-08 16:09:02 发布

阅读量267

点赞数

分类专栏： css 前端

本文链接：https://blog.csdn.net/qq_33539213/article/details/106114581

版权

前端同时被 2 个专栏收录

38 篇文章 0 订阅

订阅专栏

css

9 篇文章 0 订阅

订阅专栏

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style> 
div
{
	position:relative;
	width:300px;
	height:100px;
	background-color:yellow;
	box-shadow: 0px 10px 8px #888888;
}
	div:before{
		position:absolute;		
		top:100px;
		left:120px;
		content:'';
		width:0px;
		height:0px;
		border:30px solid;
		border-color:red transparent transparent transparent;
	}
	div:after{
		position:absolute;		
		top:50%;
		left:120px;
		content:'';
		width:60px;
		height:60px;
		background:#888;
		z-index:-1;
		box-shadow:10px 10px 8px #888888;
		transform:rotate(45deg);
	}
</style>
</head>
<body>

<div></div>

</body>
</html>