1. 云期刊首页
  2. 开发教程

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

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

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

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

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

说明:

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

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

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

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

.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调整尖角的上下左右位置。

本站所有内容,如有版权、侵权等问题,请及时联系本站做删除。发布者:云期刊,转载请注明出处:https://www.yunqikan.cn/4793.html

发表评论

电子邮件地址不会被公开。 必填项已用*标注

联系我们

在线咨询:点击这里给我发消息

邮件:drhxxkj@163.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code