效果图:

box1的代码:

.box{
position: relative;
width: 200px;
height: 200px;
border: 2px solid #000;
background-color: #fff;
}
.box:before{
position: absolute;
content: "";
width:;
height:;
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:;
height:;
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:;
height:;
left: 200px;
top: 20px;
border-bottom: 20px solid transparent;
border-left: 20px solid #000;
}
.box2:after{
position: absolute;
content: "";
width:;
height:;
left: 200px;
top: 22px;
border-bottom: 15px solid transparent;
border-left: 15px solid #fff;
}

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

CSS-带尖角的对话框的更多相关文章

  1. 纯CSS实现带小角的对话框式下拉菜单

    最近公司首页样式重写,头部下拉菜单改为了带小角的对话框式下拉菜单: 很多人可能会用图片,事实上纯CSS就能够实现: HTML: <!DOCTYPE html> <html lang= ...

  2. 百度前端笔试题目--css 实现一个带尖角的正方形

    今天在牛客网上看到这道题,发现自己并不会,看来自己css都没怎么学习,也不怎么会用.看了下答案,不是很明白,也在网上搜集了一些资料和解法,感觉一些同学博客上也写了一些解法和拓展,所以就在这里借鉴一下咯 ...

  3. html如何绘制带尖角(三角)的矩形

    结合实际情况自己写的: .menu_triangle { height: 10px; width: 10px; background-color: #049888; transform: transl ...

  4. 来自网易云的黑科技,带尖角的div......

    今天在网易云的网页版听歌,话说Steve Vai的曲子永远是这么让人揣摩不透,不过我还时更喜欢老Joe,咦,跑题了··· 大家可以看到评论输入框和回复框,上面都有个小尖角,实现的方式有很多,我一般是用 ...

  5. (转载) css实现小三角(尖角)

    在各种网站里面,我们会经常看到类似于这样的尖角:(示例:新浪微博) 它实现的方式有多种,哪种才是最简单的?哪种才是最优秀的?首先我声明一下,我还不清楚这个东西具体叫什么名字(哪位知道还望告知),暂且叫 ...

  6. 用CSS实现文本框尖角

    经常看到这样的尖角,以前不懂,以为都是用图片做出来的,后来惊奇的发现,原来很多都是用CSS做出来的,既美观又节省资源,真是两全其美啊! 那么,用CSS怎么实现这种效果呢?首先,来写一个简单的代码: & ...

  7. 纯 CSS 实现三角形尖角箭头的实例

    上次无意中发现了个使用纯 CSS 实现三角形尖角箭头的方法 http://blog.csdn.net/zhouzme/article/details/18901943 ,但没有怎么用上,也没有详细完整 ...

  8. css细节:尖角处理

    在各种网站里面,我们会经常看到类似于这样的尖角:(示例:新浪微博) 它实现的方式有多种,哪种才是最简单的?哪种才是最优秀的?首先我声明一下,我还不清楚这个东西具体叫什么名字(哪位知道还望告知),暂且叫 ...

  9. 纯CSS实现各类气球泡泡对话框效果

    原文 纯CSS实现各类气球泡泡对话框效果 一.关于纯CSS实现气泡对话框 首先,来张大图: 上边这张黄黄的,大大的,圆圆的,有个小尾巴,文字内容有些YY的图片,就是使用纯CSS实现的气泡对话框效果,一 ...

随机推荐

  1. html5 页面基本骨架

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  2. IdentityServer4 密码模式实现

    1.  修改 Config.cs using System.Collections; using System.Collections.Generic; using IdentityServer4.M ...

  3. 奇怪的Java题:为什么1000 == 1000返回为False,而100 == 100会返回为True?

    如果你运行如下代码: 1 2 3 4 Integer a = 1000, b = 1000;  System.out.println(a == b);//1 Integer c = 100, d =  ...

  4. 【bzoj1855】 [Scoi2010]股票交易 单调队列优化DP

    上一篇blog已经讲了单调队列与单调栈的用法,本篇将讲述如何借助单调队列优化dp. 我先丢一道题:bzoj1855 此题不难想出O(n^4)做法,我们用f[i][j]表示第i天手中持有j只股票时,所赚 ...

  5. 解决input和button错位(不齐)问题

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. eclip 重写从父类继承的方法的快捷操作

    转载自http://blog.sina.com.cn/s/blog_53d599430101phlo.html     一.在代码中单击鼠标右键,在弹出的快捷菜单中选择“源代码(Source)”-&g ...

  7. reCaptcha for ASP.NET

    使用reCaptcha for asp.net library,以前一直工作正常,最近发现运行不正常了,google到了一个解决方案,不适用control而直接使用api,代码如下: markup: ...

  8. LNMT(Linux+Nginx+MySQL+Tomcat)常见性能参数调优

  9. Tomcat 基本配置

    1.配置虚拟目录映射 推荐在 /conf/Catalina/localhost 下新建rand.xml方式建立虚拟目录 其中rand将会被当作映射对象,即外部访问路径. 例子:blog.xml < ...

  10. ES6-let、const和块级作用域

    1.介绍 总的来说,ES6是在ES2015的基础上改变了一些书写方式,开放了更多API,这样做的目的最终还是为了贴合实际开发的需要.如果说一门编程语言的诞生是天才的构思和实现,那它的发展无疑就是不断填 ...