效果图:

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. getopt() getopt_long()函数手册[中文翻译]

    getopt()函数 getopt_long函数 函数原型(function prototype) #include <unistd.h> int getopt(int argc, cha ...

  2. jsp页面,jstl标签中的数据在<%%>java中使用

    可参考jsp的API隐式对象.. 这部分数据其实被保存在page域中,但jsp中如果使用java代码需要在特定的标签中<%%>,在这个标签中可使用的只有pageContext对象,所以可以 ...

  3. (原创)确保JAVA线程安全的4种常用方法

    在Java中可以有很多方法来保证线程安全,比如使用同步方法.同步块,使用原子类(atomic concurrent classes),实现并发锁,使用volatile关键字,使用不变类和线程安全类. ...

  4. [题解]luogu P4116 Qtree3

    终于来到了Qtree3, 其实这是Qtree系列中最简单的一道题,并不需要线段树, 只要树链剖分的一点思想就吼了. 对于树链剖分剖出来的每一根重链,在重链上维护一个Set就好了, 每一个Set里存的都 ...

  5. 【8】JMicro微服务-JMicro ZKUI

    ZKUI是一个开源项目,是一个查看,修改ZK数据非常方便的工具.JMicro基于ZK做服务治理,配置管理,因此使用ZKUI会提供非常大的方便. Github地址:https://github.com/ ...

  6. 无头结点的单链表(C语言)

    1.单链表: 在顺序表中,用一组地址连续的存储单元来一次存放线性表的结点,因此结点的逻辑顺序与物理顺序是一致的.但链表却不同,链表是用一组任意的存储单元来存放 线性表的结点,这组存储单元可以是连续的, ...

  7. 【xsy1018】 小A的字母游戏 扩展CRT

    题目大意:有$n$个无限长的循环字符串,所谓循环字符串,就是由某一个子串重复叠加而成.现在想知道最早在哪一位,这n个字符串的那一位的字母相同. 数据范围:$n≤30000$,答案$<2^{63} ...

  8. 剑指offer二十四之二叉树中和为某一值的路径

    一.题目 输入一颗二叉树和一个整数,打印出二叉树中结点值的和为输入整数的所有路径.路径定义为从树的根结点开始往下一直到叶结点所经过的结点形成一条路径. 二.思路 详见代码 三.代码 1.解答代码 im ...

  9. 正则中str.match(pattern)与pattern.exec(str)的区别

    这两个函数除了调用对象以及参数不同之外,<javascript高级程序设计>中对exec描述比较详细,对match只是说返回数组跟exec一样.书中并没有说只说了正则在非全局模式下的情况, ...

  10. Android侧滑菜单和轮播图之滑动冲突

    接手一个项目,有一个问题需要修改:轮播图不能手动滑动,手动滑动轮播图只会触发侧滑菜单. 猜测:viewpager控件(轮播图)的触摸事件被SlidingMenu控件(侧滑菜单,非第三方项目,乃是上个开 ...