CSS——消息提示(聊天框)

最新推荐文章于 2025-10-28 14:30:03 发布

转载最新推荐文章于 2025-10-28 14:30:03 发布 · 1.8k 阅读

文章标签：

#CSS #消息提示聊天框

css 专栏收录该内容

44 篇文章

订阅专栏

本文介绍了一种使用CSS创建带有三角形边角的div元素的方法。通过设置特定的边框样式和透明度，可以在不需要额外图片的情况下实现美观的效果。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		#div1 {
			margin-left: 100px;
			width: 140px;
			height: 100px;
			background: #088CB7;
			position: relative;
			-moz-border-radius: 12px;
			-webkit-border-radius: 12px;
			border-radius: 12px;
		}
		#div1:before {
			content: "";
			width: 0;
			height: 0;
			right: 100%;
			top: 38px;
			position: absolute;
			border: 13px solid transparent;
			border-right: 26px solid #088CB7;
			/* 这边有一些改动 */
		}
	</style>
</head>
<body>
	<div id="div1"></div>
</body>
</html>

摘录于：http://jingyan.baidu.com/article/e52e36154226ef40c70c5148.html