CSS-带尖角的对话框

效果图：

box1的代码：

.box{position: relative;width: 200px;height: 200px;border: 2px solid #000;background-color: #fff;
}
.box:before{position: absolute;content: "";width: 0;height: 0;left: 200px;top: 20px;border-left: 10px solid #000;border-top: 10px solid transparent;border-bottom: 10px solid transparent;
}
.box:after{position: absolute;content: "";width: 0;height: 0;left: 200px;top: 23px;border-left: 7px solid #fff;border-top: 7px solid transparent;border-bottom: 7px solid transparent;
}

box2的代码：

.box2{position: relative;width: 200px;height: 200px;border: 2px solid #000;background-color: #fff;
}
.box2:before{position: absolute;content: "";width: 0;height: 0;left: 200px;top: 20px;border-bottom: 20px solid transparent;border-left: 20px solid #000;
}
.box2:after{position: absolute;content: "";width: 0;height: 0;left: 200px;top: 22px;border-bottom: 15px solid transparent;border-left: 15px solid #fff;
}

伪元素中的top值和border的宽度值需要根据对话框的边框宽度计算得到。

CSS-带尖角的对话框相关推荐

css聊天气派,css如何实现小尖角聊天对话框带尖角的说话泡泡效果
css如何实现小尖角聊天对话框带尖角的说话泡泡效果发布时间:2021-03-20 09:44:20 来源:亿速云阅读:58 作者:小新这篇文章主要介绍了css如何实现小尖角聊天对话框带尖角的说话 ...
html矩形加三角,html如何绘制带尖角（三角）的矩形
结合实际情况自己写的: .menu_triangle { height: 10px; width: 10px; background-color: #049888; transform: transl ...
HTML实现友好提示框(带尖角的框)
友好提示框的主要实现难点就是哪个尖角的问题,其实只要搞清楚三角形的实现原理,实现这种效果也并不难,下面介绍两种实现方法,一种是通过边框实现的三角形通过叠加实现,另一种是通过正方形旋转实现首先我们讲述 ...
css 半透明尖角上下调过来，不和背景色重叠
span.detailArrowUp { top: -15px; left: 10px; position: absolute; content: ''; border-botom: 15px tra ...
纯 CSS 实现三角形尖角箭头的实例
为什么80%的码农都做不了架构师?>>> 上次无意中发现了个使用纯 CSS 实现三角形尖角箭头的方法 http://blog.csdn.net/zhouzme/article/ ...
基于CSS实现的尖角提示符
CSS实现的尖角提示一.概述 ...
css 实现一个尖角_纯 CSS 实现三角形尖角箭头的实例
上次无意中发现了个使用纯 CSS 实现三角形尖角箭头的方法 ,但没有怎么用上,也没有详细完整的实例,今天刚好要用上,整理了下,写个完整的代码: 无标题文档 .area { margin:100px a ...
html编写气泡对话框,HTML+CSS入门纯CSS手写圆角气泡对话框
本篇教程介绍了HTML+CSS入门纯CSS手写圆角气泡对话框,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 嗯--我们设计师强烈要求一定要圆角!圆角的气泡对话框,不要那 ...
CSS特殊样式（三）纯CSS实现各类气球泡泡对话框效果
一.关于纯CSS实现气泡对话框首先,来张大图: 上边这张黄黄的,大大的,圆圆的,有个小尾巴,文字内容有些YY的图片,就是使用纯CSS实现的气泡对话框效果,一点图片都没有哦.看到这里,你是不是跟我一样 ...

CSS-带尖角的对话框

CSS-带尖角的对话框相关推荐

最新文章

热门文章