1、放置一个div标签做提示框，在其里面再放一个div标签做小尖角。并设定提示框和小方块的大小、边丸泸尺鸢框。提示框样式如下： width:300px; height:100px; border:1px solid #000;小方块样式如下： width:10px; height:10px; border:1px solid #000;
2、调整内部那个div位置，即小尖角的位置，通过left和top来调节，注意position:relative;也不可少，有了它才能进行相对定位。由于我这里调整的位置在顶部，所以对应的CSS设置为：position:relative;left:145px; top:-7px;
3、对小方块进行45度旋转transform:rotate(45deg);
4、去掉小方块多余的边，让其变成小尖角。这里需要注意，要为小尖角加上背景色否则它是透明的还会看到下方的横线。我们这里设置为白色。background-color:#FFF;
5、在提示框内再放入一个div写入提示信息，也可以不放，但是放了后更方便控制。我们再对提示框还做了圆角处理，更好看样式为：border-radius:8px;。最后给出所有源码，简单方便吧，别忘记点赞哟：）
6、<!DOCTYPE html><html><head><m髫潋啜缅eta charset="UTF-8"><title>CSS实现带尖叫的友好提示框</title><style>/* 提示框 */.tip{ width:300px; height:100px; border:1px solid #000; border-radius:8px;}/* 提示框小角的小方块 */.tip .inner{ background-color:#FFF; 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>
