HTML+CSS实现好看的三角形提示框样式

如果下载的源码需要作者授权,请更换源码。本站免费分享资源不会增加授权

在浏览网站时,大家有没有发现网站中有各式各样新颖的提示框,那你知道这些好看的提示框怎么制作的吗?这篇文章就和大家分享一个CSS实现的好看的三角形提示框,有一定的参考价值,感兴趣的朋友可以参考一下。

想要用CSS实现三角形提示框样式需要用到很多CSS中的属性,比如:display属性,border-radius圆角,position定位等等,如有不清楚的小伙伴可以看看我以前的文章,之前都有介绍过,或者访问 CSS视频教程 。

实例描述:给一个div,用border-radius,before,border-top等属性,在提示框的左上角和右下角加三角形,制作一个三角形提示框,具体代码如下:

HTML部分:

<div class="main">    <p>这是内容这是内容这是内容这是内容这是内容这是内容</p> </div>

CSS部分:

*{       margin: 0;       padding: 0;      }        .main{       width: 120px;       display: inline-block;       font-size: 14px;       color: #333;       line-height: 28px;       background: #F0981C;       position: relative;       padding: 10px;       -webkit-border-radius:5px;       -moz-border-radius:5px;       : 5px;      }      /*左三角*/      .main:before{       content: ' ';       border-top: 8px solid transparent;       border-bottom: 8px solid transparent;       border-right: 12px solid #F0981C;       position: absolute;       top: 15px;       left: -12px;      }      /*右三角*/      .main:after{       content: ' ';       border-top: 8px solid transparent;       border-bottom: 8px solid transparent;       border-left: 12px solid #F0981C;       position: absolute;       bottom: 15px;       right: -12px;      }

效果图:

HTML+CSS实现好看的三角形提示框样式

以上分享了用CSS制作三角形提示框的代码,喜欢的小伙伴可以拿去使用,也可以修改成自己喜欢的样式,希望这篇文章对你有所帮助!

【相关教程推荐】

1. HTML视频教程
2. CSS3视频教程
3. bootstrap教程

本文由(壳先生)整理自网络,如转载请注明出处:https://www.mrshell.com;
本站发布的内容若侵犯到您的权益,请邮件联系 i@mrshell.com 删除,我们将及时处理!
===========================================================================

1. 本站大部分下载资源收集于网络,不保证其完整性以及安全性,请下载后自行测试。
2. 本站资源仅供学习和交流使用,版权归资源原作者所有,请在下载后24小时之内自觉删除。
3. 不得使用于非法商业用途,商用请支持正版!不得违反国家法律,否则后果自负!
4. 若作商业用途,请购买正版,由于未及时购买和付费发生的侵权行为,与本站无关。
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!

=================================================================

壳先生 » HTML+CSS实现好看的三角形提示框样式

发表评论

提供最优质的资源集合

立即查看 了解详情