带尖角的对话框
-
放置一个div标签做提示框，在其里面再放一个div标签做小尖角。
并设定提示框和小方块的大小、边框。
提示框样式如下：
width:300px;
height:100px;
border:1px solid #000;
小方块样式如下：
width:10px;
height:10px;
border:1px solid #000;
-
调整内部那个div位置，即小尖角的位置，通过left和top来调节，注意position:relative;也不可少，有了它才能进行相对定位。由于我这里调整的位置在顶部，所以对应的CSS设置为：
position:relative;
left:145px;
top:-7px;
-
对小方块进行45度旋转
transform:rotate(45deg);
-
去掉小方块多余的边，让其变成小尖角。这里需要注意，要为小尖角加上背景色否则它是透明的还会看到下方的横线。我们这里设置为白色。
-
在提示框内再放入一个div写入提示信息，也可以不放，但是放了后更方便控制。我们再对提示框还做了圆角处理，更好看样式为：border-radius:8px;。
最后给出所有源码，简单方便吧，别忘记点赞哟：）
-
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS实现带尖叫的友好提示框</title>
<style>
/* 提示框 */
.tip{
width:300px;
height:100px;
border:1px solid #000;
border-radius:8px;
}
/* 提示框小角的小方块 */
.tip .inner{
width:10px;
height:10px;
border:1px solid #000;
/* 旋转小方块并调整位置形成尖角 */
position:relative;
left:145px;
top:-7px;
transform:rotate(45deg);
border-right:0px;
border-bottom:0px;
}
</style>
</head>
<body>
<p>CSS实现带尖叫的友好提示框</p>
<div class="tip">
<div class="inner"></div>
<div style="margin:4px;">提示信息写这里：）</div>
</div>
</body>
</html>
本文仅提供参考，是本人闲时所写笔记，如有错误，还请赐教，作者：阿蒙不萌，大家可以随意转载
