具体实现

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta charset="utf-8">
  5.   <meta name="viewport" content="width=device-width">
  6.   <title>CSS实现带阴影效果的三角形</title>
  7.   <style>
  8.     .box {
  9.       position: relative;
  10.       width: 600px;
  11.       height: 400px;
  12.       background: #fff;
  13.       border: 1px solid #ccc;
  14.       box-shadow: 2px 2px 2px #ccc;
  15.     }
  16.     .box:after {
  17.       position: absolute;
  18.       display: inline-block;
  19.       top: 380px;
  20.       left: 300px;
  21.       width: 0;
  22.       height: 0px;
  23.       content: '';
  24.       border-style: solid;
  25.       border-width: 20px;
  26.       border-color: #fff #fff transparent transparent;
  27.       transform: rotate(135deg);
  28.       box-shadow: 2px -2px 2px #ccc;
  29.     }
  30.   </style>
  31. </head>
  32. <body>
  33.   <div class="box">
  34.   </div>
  35. </body>
  36. </html>

运行结果

注：

  1. 调整 transform: rotate(135deg); 即可使箭头朝向改变。

CSS实现带阴影效果的三角形的更多相关文章

  1. css写带边框的三角形

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

  2. 用CSS画一个带阴影的三角形的示例代码

    1. 思路 怎么用CSS3画一个带阴影的三角形呢 ? 有童鞋说, 这还不简单吗 网上有很多解决方案, 但其实大多都是实现不太完美的, 存在一些问题 假设我们做一个向下的三角形箭头 常见的方法大致有两种 ...

  3. CSS 奇思妙想 | 巧妙的实现带圆角的三角形

    之前在这篇文章中 -- <老生常谈之 CSS 实现三角形>,介绍了 6 种使用 CSS 实现三角形的方式. 但是其中漏掉了一个非常重要的场景,如何使用纯 CSS 实现带圆角的三角形呢?,像 ...

  4. css挤带边框的三角

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  5. css实现带箭头选项卡

    这阵子在做一个web端项目中遇到一个问题,需要实现带箭头的选项卡点击可切换.起初没想太多,直接切一个向上的小箭头图片,外层div设置相同颜色的边框,再用相对定位和绝对定位.这种方法是可行的,但是因为手 ...

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

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

  7. 使用纯CSS实现带箭头的提示框

    爱编程爱分享,原创文章,转载请注明出处,谢谢!http://www.cnblogs.com/fozero/p/6187323.html 1.全部代码 <!DOCTYPE html> < ...

  8. css兼容各个浏览器的三角形图标

    css兼容各个浏览器的三角形图标 在当前流行的的网站上,我们经常会看到一些小三角形的下拉提示(微博顶部的下拉菜单),简单的方式可以使用一张图片代替,但是随着前端技术的发展,以及开发者对于前端性能的“吹 ...

  9. js+css实现带缓冲效果右键弹出菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. codevs 1080 线段树练习 CDQ分治

    codevs 1080 线段树练习 http://codevs.cn/problem/1080/  时间限制: 1 s  空间限制: 128000 KB   题目描述 Description 一行N个 ...

  2. HDU 2841 容斥 或 反演

    $n,m <= 1e5$ ,$i<=n$,$j<=m$,求$(i⊥j)$对数 /** @Date : 2017-09-26 23:01:05 * @FileName: HDU 284 ...

  3. ZeroMQ API（一） 总序

    序 zeromq是一个轻量级的消息库.它扩展了标准的套接字接口,其特性与传统的消息中间件不同,zeromq提供异步消息队列.多消息传递模式.消息过滤(订阅).无缝访问多个传输协议等的抽象. 本系列AP ...

  4. Jenkins git 的配置及问题解决

    背景:最近项目需要 Jenkins 集成git,着手记录遇到的问题及解决方式 一.搭建Jenkins环境步骤这里(略) 二.安装Jenkins插件(系统管理-->插件管理-->可选插件)选 ...

  5. onchange/onpropertychange/oninput

    onpropertychange事件,顾名思义,就是property(属性)change(改变)的时候,触发事件.这是IE专有的!如果想兼容其它浏览器,有个类似的事件,oninput! 可能大家会想到 ...

  6. php按照指定顺序的排序

    今天遇到一个需求,需要对一个数组按指定顺序进行排序,最终查到个解决办法: $sort_rule = [5,7,3,1,8,2]; $arr = [1,2,3,5,7,8]; //需求,将数组$arr以 ...

  7. why inline functions must be put in header files?

    ［why inline functions must be put in header files?］ 编译中有2个过程:compile.link.先进行compile,compile中把源代码编译成 ...

  8. td自动换行

    自动换行方法: 1.在<td>中设置样式style为word-wrap:break-word;word-break:break-all; (一般情况只需要设置word-break:brea ...

  9. 反卷积Deconvolution

    反卷积(转置卷积.空洞卷积(微步卷积))近几年用得较多,本篇博客主要是介绍一下反卷积,尤其是怎么计算反卷积(选择反卷积的相关参数) 图1 空洞卷积(微步卷积)的例子,其中下面的图是输入,上面的图是输出 ...

  10. 通过Class类获取对象实例

    通过Class对象获取对象的方式是通过class.newInstance()方式获取,通过调用默认构造参数实例化一个对象. /** * Created by hunt on 2017/6/27. * ...