用css怎样完成一个带尖角对话框效果？
发布时间：2022-01-11 18:54:00 所属栏目：语言 来源：互联网
导读：一、用css怎样实现一个带尖角对话框效果？我们在一些聊天窗口，常能看到带尖角的对话框，那么这种对话框是怎样做的呢？其实现实这种对话框效果并不困难，这篇文章就给大家分享一下用CSS实现带尖角对话框效果的示例。 二、效果 三、代码 css;toolbar:falsesty
|
一、用css怎样实现一个带尖角对话框效果？我们在一些聊天窗口，常能看到带尖角的对话框，那么这种对话框是怎样做的呢？其实现实这种对话框效果并不困难，这篇文章就给大家分享一下用CSS实现带尖角对话框效果的示例。 二、效果 三、代码 css;toolbar:false"><style> #talkbubble { width: 160px; height: 80px; background: red; position: relative; border-radius: 10px; margin-left:20px; } #talkbubble:before { content: ""; position: absolute; right: 100%; top: 26px; border-top: 13px solid transparent; border-right: 26px solid red; border-bottom: 13px solid transparent; } </style> <div id="talkbubble"></div> 补充：纯css实现气泡对话框尖角处理 先来看一下效果图： 简单粗暴上代码： html： <div class="dialog-box"> <span class="bot"></span> <span class="top"></span> </div> less: .dialog-box { position: relative; span { width:0; height:0; font-size:0; overflow:hidden; position:absolute; &.bot{ border-width: 15px; border-style: solid dashed dashed; border-color: transparent transparent #F9743A transparent; left: 15px; top: -29px; } &.top{ border-width:13px; border-style:solid dashed dashed; border-color:transparent transparent #fff transparent; left:17px; top:-25px; } } } （编辑：晋中站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
