实现对话框的小三角

最新推荐文章于 2023-10-10 16:02:46 发布

羽筠

最新推荐文章于 2023-10-10 16:02:46 发布

阅读量2.1k

点赞数

分类专栏： CSS 文章标签： html css

本文链接：https://blog.csdn.net/qq_16494241/article/details/47396499

版权

CSS 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

HTML如下

<div class="content_box">
<span class="org_box_cor cor2"></span>
<span class="org_box_cor cor1"></span>
温馨提示：您还没有发布活动，请<a href="#">点击这里</a>发布一款优惠券吧

</div>

CSS如下
.content_box{ width:420px; padding-left:12px; line-height:32px; background:#FCF8E3; border:#CEBCAE solid 1px; color:a18d7d; position:relative;}

.data_center_prompt a{color:#2eb9f2;}
.org_box_cor{ width:0; height:0; font-size:0;border-style:solid;overflow:hidden; position:absolute;}
.cor2{ border-width:14px 10px;border-color:#CEBCAE transparent transparent transparent;left:383px; bottom:-28px;}
.cor1{ border-width:13px 8px;border-color:#FCF8E3 transparent transparent transparent;left:385px; bottom:-26px;}