css绘制带箭头对话框

最新推荐文章于 2024-08-01 13:41:00 发布

chenlunju

最新推荐文章于 2024-08-01 13:41:00 发布

阅读量1.5k

点赞数

分类专栏： HTML CSS

本文链接：https://blog.csdn.net/chenlunju/article/details/84875645

版权

HTML 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

CSS

7 篇文章 0 订阅

订阅专栏

直接上效果图

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="style1207.css">

</head>
<body>
	
	<div class="demo1"></div>
	<div class="demo2"></div>
</body>
</html>

css文件

.demo1{
	float: left;
	bottom: 15px;
	width: 0px;
	height: 0px;
	border:20px solid;
	margin: 40px;
	margin-right: 0px;
	border-right-color: deepskyblue;
	border-left-color: transparent;
	border-top-color: transparent;
	border-bottom-color: transparent;
}
.demo2{
	float: left;
	width: 0px;
	height: 0px;
	border:60px solid;
	border-color: deepskyblue;
	border-left-width: 600px;
	border-radius: 15px;
}