本文地址：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. Delphi控件-复合控件【转】

    复合控件复合控件是Delphi控件中非常重要的一种控件,复合控件就是将两个或两个以上的控件重新组合成一个新的控件.例如TspinEdit.TlabeledEdit.TDBNavigator等就是复合控 ...

  2. oracle 3大范式 理解

    CREATE OR REPLACE PACKAGE pack3 AS FUNCTION fun_calc (num1 NUMBER ,num2 NUMBER ) RETURN number ; fun ...

  3. java 基础 --静态

    1. 静态变量和静态代码块是在JVM加载类的时候执行的(静态变量被赋值,以后再new时不会重新赋值),执行且只执行一次2. 独立于该类的任何对象,不依赖于特定的实例,被类的所有实例(对象)所共享3. ...

  4. .net core2.0入门使用EF

    使用Nuget导入所需要的EF 核心包以及对应数据库的驱动包,我用的是sqlserver(.net 支持的所有数据库) Install-Package Microsoft.EntityFramewor ...

  5. Angular中ui-select的使用

    Angular中ui-select的使用 最近工作一直很忙,没有时间整理知识,前几天项目中需要用到angular-ui-select,实现下拉框快速过滤效果,今天有时间研究了一下,终于搞明白了. 一. ...

  6. C#实体对象序列化成Json，并让字段的首字母小写

    引言:最近在工作中遇到与某些API对接的post的数据需要将对象的字段首字母小写.解决办法有两种:第一种:使用对象的字段属性设置JsonProperty来实现(不推荐,因为需要手动的修改每个字段的属性 ...

  7. POJ2391_Ombrophobic Bovines

    有F个地方,每个地方有一定数量的牛,能够容纳一定数量的牛,某些地方之间有边,表示走两点之间需要消耗的时间. 现在求使得所有的牛都被容纳所需要的最少的时间. 由于时间是一个不确定的因素,我们需要二分. ...

  8. UVALive6443_Alien Abduction Again

    题意为给你若干个三次函数,以及每一个函数所分布的区间,由于每个函数的所有的系数都是整数,所以最后的函数在整数点处的值也是整数. 现在每次可以插入函数或者询问区间,现在要求每次询问区间后,所有的函数在这 ...

  9. spring+struts整合

    首先是为什么整合strut2和spring? struts2的action是由struts2自己创建出来的,它不受spring的委托,也不受spring的管理,所以无法进行自动注入:spring和st ...

  10. 知乎回答：每日完成任务用于打卡的APP

    其实我也一直在寻找最佳的解决方案.安卓上有这样的,叫做HabitHub.用过一段时间,不容易坚持,这个软件对于培养习惯来说无疑是最好的,但是仅限于记录,这样的软件实在太多.我这里提供一下我自己的方法, ...