div+css做出带三角的弹出框

最新推荐文章于 2024-05-09 17:00:10 发布

原创最新推荐文章于 2024-05-09 17:00:10 发布 · 6.5k 阅读

2 ·

CC 4.0 BY-SA版权

本文介绍了一种使用CSS border属性创建三角形的方法，这种方法避免了图片背景可能出现的杂边问题，并通过示例代码展示了如何实现一个指向下方的三角形。

notice：三角的那部分可以用图片作为背景，但是容易出现杂边。所以利用css中border做出三角形状，原理是用border的形状如下：

当我们设置content的宽高为0时，可想而知会出现什么效果，如下：

然后把不保留的其他boder设置颜色为透明transparent就行了。具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.box{
			position: relative;
			padding-top: 8px;
		}
		.con{
			width: 200px;
			height: 100px;
			border: 1px skyblue solid;
			border-radius: 3px;
			background-color: skyblue;
		}
		.con-ret{
			border: 7px solid transparent;
			border-bottom-color:skyblue; 
			position: absolute;
			left: 10px;
			top:-6px;
		}
	</style>
</head>
<body>
	<div class="box">
		<div class="con-ret"></div>
		<div class="con"></div>
	</div>
</body>
</html>

实现的效果图如下：