纯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

发表评论

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

问答社区 在线客服
联系我们

QQ 技术:109033286

QQ 运维:3423710838

email 邮箱:drhxxkj@163.com

Qqun QQ交流群:808026766

分享本页
返回顶部
您的专业上云顾问

攻略6:

若您不是新用户,强烈建议注册新账号再购买,不论什么云都很青睐新用户,价格可以低至1折,找代理还可优惠15%至25%。

立即去云小店购买
您的专业上云顾问

攻略5:

各品牌云服务器的续费成本大约是新购成本的3倍,建议一次性购买3年,可以节约续费成本70%,莫图一时爽续费喊爹娘。

立即去云小店购买
您的专业上云顾问

攻略4:

不论选择那个厂商的云,评估业务量后尽量选择高配,避免服务器不够用时的升级费用,可节约升级费用至少40%到80%。

立即去云小店购买
您的专业上云顾问

攻略3:

阿里云1年在代理商购买,多年在云小站购买;腾讯云、华为云全部在代理商处购买至少再官方折扣基础再优惠15%到25%。

立即去云小店购买
您的专业上云顾问

攻略2:

领取代金券。每次活动都有500到2000元代金券可以领取,本站轮播长期可以领取阿里云、腾讯云无门槛代金券,可供上云使用。

戳本站上方大图领取
您的专业上云顾问

攻略1:

找代理商注册账号可优惠10%至20%,好多伙伴第一次上云,没有条件找到代理商,买完后才发现多花了1000多元,后悔莫及!

代理商合作联系站长