纯CSS实现带尖角浮出层边框样式，可用于对话框、公告栏、热门标签等样式

带尖角浮出的边框样式在对话框中应用很多，其实也可以用于公告通知栏和热门标签。写法也是多种多样，常用的有三种方法：

1、背景图片：用背景图片写起来简单，但是要根据文章的多少调整图片的大小，而且图片大小直接影响网站加载速度，所以使用的较少。

2、用 Html + CSS：用CSS写边框及尖角样式，然后在DIV中用◆字符来制作尖角。这种做法使用的较多，但是受字体等因素的影响，有时会出现错位问题。（不是今天重点介绍的方法，代码公开到文后）

3、纯CSS：这种方法可以根据文字多少自适应，而且不影响网站加载速度，几乎没有限制。具体CSS代码如下：

说明：

1. 颜色可根据自己的需要进行调配。
2. 尖角位置可以用left、right、top、bottom属性调整。

.notice-text {
color: #ff7b66;
background: #fffcef;
line-height: 20px;
padding: 7px 11px;
border: 1px solid #ff7b66;
border-radius: 5px;
position: relative;
margin-left: 16px;
font-size: 16px;
float: left;
}

.notice-text:before {
content: "";
border-top: 5px solid transparent;
border-right: 6px solid #ff7b66;
border-bottom: 5px solid transparent;
position: absolute;
left: -6px;
bottom: 10px;
}

补充资料：用 Html + CSS实现尖角浮层代码

HTML代码：

<div class="poptip">
<span class="poptip-arrow poptip-arrow-left"><em>◆</em><i>◆</i></span>
欢迎来访本站，我们只提供大额代金券，阿里云、腾讯云官方优惠链接，云服务器等产品均在各云服务器官方购买。我们只做优惠信息的分享者！！！
</div>

CSS代码：

.poptip{background:#FFFCEF;color: #DB7C22;float:left;position: relative;top:8px;left:40px;height: 35px;padding: 6px 10px 5px;font-size: 12px;border: solid 1px #FFBB76;border-radius: 2px;box-shadow: 0 0 3px #ddd;}
.poptip-arrow{position: absolute;overflow: hidden;font-style: normal;font-family: simsun;font-size: 12px;text-shadow:0 0 2px #ccc;}
.poptip-arrow em,.poptip-arrow i{position: absolute;left:0;top:0;font-style: normal;}
.poptip-arrow em{color:#FFBB76;}
.poptip-arrow i{color: #FFFCEF;}
.poptip-arrow-left{left:-6px;height: 12px;width: 6px;top: 12px;margin-top:-6px;}
.poptip-arrow-left em{left:1px;}
.poptip-arrow-left i{left:2px;}

如果你希望尖角居中显示，可以在.poptip-arrow这个span上加上style=”left:50%”或者style=”top:50%”，可以通过改写left、right、top、bottom调整尖角的上下左右位置。