一个小小的技巧：

如图所示，这种小三角，不用图片，只用css怎么实现呢？

直接上代码吧：

<!DOCTYPE html>

<html>

    <head>

        <title>三角</title>

        <style>

            .main{width: 100px;border: 1px solid red;height: 100px;position: relative;}

            .box{width: 0;height: 0;border-style: solid;border-width: 10px;border-color: red transparent transparent transparent;position: relative;margin-left: 40px;z-index: 10;}

            .box .con{ width: 0;height: 0;border-style: solid;border-width: 15px;border-color: #fff transparent transparent transparent;position: absolute;left: -15px;top: -16px;}

        </style>

    </head>

        <div class="main"></div>

        <div class="box">

            <div class="con"></div>

        </div>

    </body>

</html>

其原理就是利用边框，三个边只有一个有颜色，其他透明，用两个层实现遮挡。

还有有点小用处的，在此记录一下，以后遇到了直接拷贝。

【小技巧】只用css实现带小三角的对话框样式的更多相关文章

  1. 纯css写带小三角对话框

    在实际样式中经常会遇到要写类似对话框的样式,而这种样式往往会有一个小三角,如下所示: 那么如何用css写出来呢,其实很简单,先让父元素相对定位,然后运用css的伪类before或after.就可以写个 ...

  2. 前端小技巧：css sprite----V客学院技术分享

    前端小技巧:css sprite 因为英文名叫sprite,翻译过来是精灵,而雪碧饮料也叫sprite,所以叫精灵兔或者雪碧图. 它有什么作用呢? 当用户在浏览器里输入一个URL地址的时候,你会感觉无 ...

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

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

  4. 小技巧！CSS 整块文本溢出省略特性探究

    今天的文章很有意思,讲一讲整块文本溢出省略打点的一些有意思的细节. 文本超长打点 我们都知道,到今天(2020/03/06),CSS 提供了两种方式便于我们进行文本超长的打点省略. 对于单行文本,使用 ...

  5. 小技巧！CSS 提取图片主题色功能探索

    本文将介绍一种利用 CSS 获取图片主题色的小技巧.一起看看~ 背景 起因是微信技术群里有个同学发问,有什么方法能够获取图片的主色呢?有一张图片,获取他的主色调: 利用获取到的这个颜色值,来实现类似这 ...

  6. UVa140 Bandwidth 小剪枝+双射小技巧+枚举全排列+字符串的小处理

    给出一个图,找出其中的最小带宽的排列.具体要求见传送门:UVa140 这题有些小技巧可以简化代码的编写. 本题的实现参考了刘汝佳老师的源码,的确给了我许多启发,感谢刘老师. 思路: 建立双射关系:从字 ...

  7. mac上的键盘生活——输入法键位设置小技巧以及去掉自带输入法

    今天上QQ跟阳小进讨论的时候突然聊到了输入法,然后阳小进就发了这样一段文字过来: 修改中西文切换键由Shift到Ctrl 关于为什么要改为Ctrl键,贴吧里有个讨论 在贴吧说服佛振的网友: 「因为 S ...

  8. JQuery和html+css实现带小圆点和左右按钮的轮播图

    是的!你没看错!还是轮播图.这次的JQuery的哟!! CSS代码: /*轮播图 左右按钮 小白点*/ #second_div{ margin-top: 160px; } .img_box{ over ...

  9. 【】小技巧】CSS文字两端对齐

    需求如下,红框所在的文字有四个字的.三个字的.两个字的,如果不两端对齐可以选择居中对齐,或者右对齐.但是如果要像下面这样两端对齐呢? 我相信以前很多人都这么干过:两个字中间使用 来隔开达到四个字的宽度 ...

随机推荐

  1. matplotlib绘制热力图

    版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/jin_tmac/article/deta ...

  2. HZOJ 通讯

    B. 通讯 题目描述 “这一切都是命运石之门的选择.” 试图研制时间机器的机关SERN截获了中二科学家伦太郎发往过去的一条短 信,并由此得知了伦太郎制作出了电话微波炉(仮). 为了掌握时间机器的技术, ...

  3. 2019-8-31-PowerShell-通过-WMI-获取系统服务

    title author date CreateTime categories PowerShell 通过 WMI 获取系统服务 lindexi 2019-08-31 16:55:58 +0800 2 ...

  4. 微信公众号无法使用css3的多行省略

    解决通过伪元素 .text{ width: 100%; position:relative; overflow:hidden; height: 20px /* overflow : hidden; t ...

  5. lrj 9.4.1 最长上升子序列 LIS

    p275 d(i)是以Ai为结尾的最长上升子序列的长度 <算法竞赛入门经典-训练指南>p62 问题6 提供了一种优化到 O(nlogn)的方法. 文本中用g(i)表示d值为i的最小状态编号 ...

  6. 怎么实现Web聊天

    如果你对web聊天这个事情没什么概念,那么最佳做法可能是:openfire+jsjac openfire是java做的开源xmpp服务器,jsjac是javascript做的开源的网页版xmpp客户端 ...

  7. [转]【Linux】Linux 目录结构

    初学Linux,首先需要弄清Linux 标准目录结构 / root --- 启动Linux时使用的一些核心文件.如操作系统内核.引导程序Grub等. home --- 存储普通用户的个人文件 ftp ...

  8. Activiti - 新一代的开源 BPM 引擎

    http://www.ibm.com/developerworks/cn/Java/j-lo-activiti1/ ****************************************** ...

  9. 【React】 npm 常用的插件

    npm install –save-dev    package.json   安装环境 https://segmentfault.com/a/1190000008489881  全局 https:/ ...

  10. 关于移动端弹层下的body滚动

    关于移动端弹层下的body滚动 这个问题在移动端挺常见的,网上也有一些解决方法,现在笔者来总结一下:css的解决方案都有兼容问题,js是比较稳定的解决方法(虽然比较麻烦) ps: 本文的例子都是用vu ...