具体实现

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width">

  <title>CSS实现带阴影效果的三角形</title>

  <style>

    .box {

      position: relative;

      width: 600px;

      height: 400px;

      background: #fff;

      border: 1px solid #ccc;

      box-shadow: 2px 2px 2px #ccc;

    }

    .box:after {

      position: absolute;

      display: inline-block;

      top: 380px;

      left: 300px;

      width: 0;

      height: 0px;

      content: '';

      border-style: solid;

      border-width: 20px;

      border-color: #fff #fff transparent transparent;

      transform: rotate(135deg);

      box-shadow: 2px -2px 2px #ccc;

    }

  </style>

</head>

<body>

  <div class="box">

  </div>

</body>

</html>

运行结果

注：

调整 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. 动态规划：树形DP-景点中心（树的带权重心）

    话说宁波市的中小学生在镇海中学参加计算机程序设计比赛,比赛之余,他们在镇海中学的各个景点参观.镇海中学共有n个景点,每个景点均有若干学生正在参 观.这n个景点以自然数1至n编号,每两个景点的编号均不同 ...

  2. HDU 1564 简单博弈 水

    n*n棋盘,初始左上角有一个石头,每次放只能在相邻的四个位置之一,不能操作者输. 如果以初始石头编号为1作为后手,那么对于每次先手胜的情况其最后一步的四周的编号必定是奇数,且此时编号为偶数,而对于一个 ...

  3. seaborn基础整理

    seaborn是基于matplotlib的更高级的做图工具,下面主要针对以下几个部分进行整理: 第一部分:https://douzujun.github.io/page/%E6%95%B0%E6%8D ...

  4. Shell中eval的用法示例

    功能说明:告知shell取出eval的参数,重新运算求出参数的内容. 语 法:eval [参数]补充说明:eval可读取一连串的参数,然后再依参数本身的特性来执行. 参 数:参数不限数目,彼此之间用分 ...

  5. SpringBoot 线程池配置 实现AsyncConfigurer接口方法

      目的是:  通过实现AsyncConfigurer自定义线程池,包含异常处理  实现AsyncConfigurer接口对异常线程池更加细粒度的控制 *a) 创建线程自己的线程池  b) 对void ...

  6. addclass,removeclass

    定义和用法 addClass() 方法向被选元素添加一个或多个类. 该方法不会移除已存在的 class 属性,仅仅添加一个或多个 class 属性. 提示:如需添加多个类,请使用空格分隔类名. rem ...

  7. Python raw_input和input总结 在版本2和版本3中的区别

    Python 2.3.4 (#1, Feb 2 2005, 11:44:13) [GCC 3.4.3 20041212 (Red Hat 3.4.3-9.EL4)] on linux2 Type &q ...

  8. Electron build 无法下载 winCodeSign 等资源

    将 7z 文件下载到 以下 cache 目录并解压 macOS: ~/Library/Caches/electron-builder Linux: ~/.cache/electron-builder ...

  9. 20165230 《Java程序设计》实验二（Java面向对象程序设计）实验报告

    20165230 <Java程序设计>实验二(Java面向对象程序设计)实验报告 一.实验报告封面 课程:Java程序设计 班级:1652班 姓名:田坤烨 学号:20165230 成绩: ...

  10. Hibernate5笔记7--Hibernate缓存机制

    Hibernate缓存机制: 缓存范围: 应用程序中根据缓存的范围,可以将缓存分为三类:   (1)事务范围缓存(单Session,即一级缓存) 事务范围的缓存只能被当前事务访问,每个事务都有各自的缓 ...