本文地址：http://www.cnblogs.com/veinyin/p/8690882.html 

要写一个对话气泡样式，我们首先想到的当然给是一个盒子，然后用边框画一个三角形定位过去。

如果不需要给阴影，这样是肯定没问题的。

但是！当 UI 把三角形放在顶部，并要求给加一个阴影的时候，内心就是极度崩溃的了。

基本上三角形都是一个边框，而这样画出来的三角形是给不了阴影的，所以要曲线救国。

首先我想到的就是画三个三角形，分别给白色、浅灰、深灰，定位过去给假阴影，这样效果看上去很生硬，如下：

这时就需要想点别的方法了。

第二种方式就是用两条边画三角形，两条相邻的给颜色，另两条相邻的给 transparent，这样就可以给 box-shadow 了。

但是！当然有但是。三角形有投影了，定位过去三角形跟下面盒子一定会有一个分割线。

要解决这个问题，只需要给一个遮罩盖一下。

这时，我们会开心的发现分割线没了。

但是！另一个问题出现了。是的，太多问题要解决。

我们在盒子里给内容时，发现上面遮罩挡住了内容，因为要挡住必须把 z-index 给的比盒子大。

知道问题之后就很好解决了。再给一个放内容的盒子，z-index 给一个比遮罩更大的值就可以了。

效果如下图，可以说是很完美的达到 UI 效果了。

至此结束，HTML 与 CSS 如下：

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8" />

     <meta http-equiv="X-UA-Compatible" content="IE=edge">

     <title>demo</title>

     <meta name="viewport" content="width=device-width, initial-scale=1">

     <style>

         *{

             padding: 0;

             margin: 0;

             background-color: #ccc;

         }

         .box {

             width: 500px;

             /* height: 300px; */

             background-color:#ffffff;

             margin: 100px auto;

             position: relative;

             border-radius: 8px;

             box-shadow: 4px 4px 8px #333

         }

         .triangle{

             z-index: -9;

             position: absolute;

             top: -10px;

             left: 280px;

             width: 0;

             height: 0;

             border-style: solid;

             border-width: 20px;

             border-color: #fff #fff transparent transparent;

             transform: rotate(-45deg);

             box-shadow: 4px 4px 8px #333;

         }

         .triangle-mask{

             z-index: 2;

             width: 30px;

             height: 30px;

             background-color: #ffffff;

             transform: rotate(-45deg);

             position: absolute;

             top: -12px;

             left: 285px;

         }

         .container{

             position: relative;

             top: 0;

             left: 0;

             z-index: 3;

             background-color:#ffffff;

             border-radius: 8px;

             padding: 10px;

         }

     </style>

 </head>

 <body>

     <div class="box">

         <div class="container">

             我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容

         </div>

         <div class="triangle"></div>

         <div class="triangle-mask"></div>

     </div>

 </body>

 </html>

END~~~≥ω≤

边框画的三角形给shadow的更多相关文章

  1. OpenGL阴影，Shadow Volumes（附源程序，使用 VCGlib ）

    实验平台:Win7,VS2010 先上结果截图:    本文是我前一篇博客:OpenGL阴影,Shadow Mapping(附源程序)的下篇,描述两个最常用的阴影技术中的第二个,Shadow Volu ...

  2. Project Settings之Quality翻译

    (版本是2018.4......翻译是自己的渣翻译水平) Unity allows you to set the level of graphical quality it attempts to r ...

  3. 简单说 通过CSS的滤镜 实现 火焰效果

    说明 上次我们了解了一些css滤镜的基础知识, 简单说 CSS滤镜 filter属性 这次我们就来用css的滤镜实现一个 火焰的效果. 解释 要实现上面的火焰效果,我们先来了解一些必要的东西. 上次我 ...

  4. css进阶 01-CSS中的非布局样式

    01-CSS中的非布局样式 #前言 CSS中,有很多非布局样式,这些样式(属性)和与布局无关,包括: 字体.字重.颜色.大小.行高 背景.边框 滚动.换行 装饰性属性(粗体.斜体.下划线)等. 这篇文 ...

  5. 用CSS绘制箭头等三角形图案 [译]

    最近重新设计了我的网站,准备添加tooltips提示信息效果.实现很容易,但我想要让提示功能具有三角形的指示图标.当我重新思考想要所设计的每个图标颜色都随心所欲的时候,采用图片那就是一场灾难.幸运的是 ...

  6. (转)Shadow Map & Shadow Volume

    转自:http://blog.csdn.net/hippig/article/details/7858574 shadow volume 这个术语几乎是随着 DOOM3 的发布而成为FPS 玩家和图形 ...

  7. CSS三角形广告文字

    街上经常碰到一些发各类广告传单的,有一次收到一张房地产广告的传单,顺手留下来,看着里面有些广告挺吸引人,同时也想练练自己css技术,故抽空做了一下. 原图某区域如下: 实现上图效果是需要一些想象力的, ...

  8. 利用Border画三角形

    边框 1.边框其实并不是矩形,而是梯形 2.利用边框画三角形: div.a{ width:0px; height:0px; border:10px white solid; border-top-co ...

  9. opengl 教程(24) shadow mapping (2)

    原帖地址:http://ogldev.atspace.co.uk/www/tutorial24/tutorial24.html 本篇教程中,我们通过shadowmap来实现阴影渲染. 我们知道shad ...

随机推荐

  1. Oracle中SYS_CONNECT_BY_PATH函数的妙用 ;

    Oracle 中SYS_CONNECT_BY_PATH函数是非常重要的函数,下面就为您介绍一个使用SYS_CONNECT_BY_PATH函数的例子,实例如下: 数据准备: ),b )); ', 'A' ...

  2. node入门学习(一)

    一.安装node.js 方式很多npm,git等,新手建议从官网上直接去下载node的安装包.一键安装. 二.创建一个web服务器. const http = require('http'); htt ...

  3. jQuery : 有关TypeError: invalid ‘in’ operand obj的错误

    参考 lwx2615 的博客 ,网站:  http://blog.csdn.net/lwx2615/article/details/9668777 由PHP返回一个json数据 $.ajax({ ur ...

  4. mysql用mysqldump数据库备份和恢复

    备份: 用mysqldump命令把数据库被分成sql文件:(注意是在cmd里,不用进入数据库,输入之后会提示输入密码) mysqldump -hlocalhost -uroot -p testdb & ...

  5. Gson获取json串中的key-value

    1.依赖包 <dependency> <groupId>com.google.code.gson</groupId> <artifactId>gson& ...

  6. 【比赛】NOIP2017 宝藏

    这道题考试的时候就骗了部分分.其实一眼看过去,n范围12,就知道是状压,但是不知道怎么状压,想了5分钟想不出来就枪毙了状压,与AC再见了. 现在写的是状压搜索,其实算是哈希搜索,感觉状压DP理解不了啊 ...

  7. 【BZOJ1045】糖果传递（贪心）

    [BZOJ1045]糖果传递(贪心) 题面 BZOJ 洛谷 题解 秉承者娱乐精神,我们必须写一个费用流,并且相信信仰跑不过去. 于是写了一个\(zkw\)费用流如下:(您可以无视此份代码) #incl ...

  8. 【转】64位Ubuntu 16.04搭建嵌入式交叉编译环境arm-linux-gcc过程图解

    64位Ubuntu 16.04搭建嵌入式交叉编译环境arm-linux-gcc过程图解,开发裸机环境之前需要先搭建其开发环境,毕竟工欲善其事必先利其器嘛.  安装步骤 1.准备工具安装目录 下载 ar ...

  9. mimikazhi Kerberos Modules

    Kerberos Modules 1.   .#####.   mimikatz 2.0 alpha (x64) release "Kiwi en C" (Oct  9201500 ...

  10. Java考试题之八

    QUESTION 139 Giventhe following directory structure: bigProject |--source | |--Utils.java ||--classe ...