css对话框的写法

最新推荐文章于 2024-08-31 15:04:34 发布

前端工程师申胥

最新推荐文章于 2024-08-31 15:04:34 发布

阅读量1.5k

点赞数

分类专栏： web前端文章标签： css 前端程序员编程 it

本文链接：https://blog.csdn.net/moonbc/article/details/89068412

版权

本文介绍如何使用CSS创建对话框，重点在于利用CSS边框来绘制不同方向的三角形，并通过调整伪元素定位实现对话框效果。内容包括不同类型的三角形绘制方法及其在对话框中的应用。

摘要由CSDN通过智能技术生成

最近比较忙，好久没有维护博客了，在这里表示歉意。

最近主要在做touchweb的项目，那么我就记录一下我在做这个项目中的问题吧，当然，今天主要是从css开始。后面博客会陆续记录其他的问题，例如图片延迟加载、图片的canvas渲染、jquery模拟下拉选择以及highchart图表、高德地图、swipe滑动、jquery的hover图片闪烁等问题。好吧，言归正传，今天主要先介绍一下css吧。

之前我在css常用效果总结这篇文章中写了一下常用的容易忘掉的css ,今天写的这个css模拟对话框，假如你理解了，那么是很好记的，你不理解没有关系，可以把我的这篇文章收藏起来，用到的时候，可以翻出来看一下！

如下图：左侧三角形

css代码如下：

#talkbubble {
margin-left:30px;
width: 120px;
height: 80px;
background: red;
position: relative;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#talkbubble:before {
content:"";
position: absolute;
right: 100%;
top: 26px;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-right: 26px solid red;
border-bottom: 13px solid transparent;