具体实现

<!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. classpath 及读取 properties 文件

    java代码中获取项目的静态文件,如获取 properties 文件内容是必不可少的. Spring 下只需要通过 @Value 获取配置文件值 <!-- 资源文件--> <util ...

  2. [Luogu 3398] 仓鼠找sugar

    [Luogu 3398] 仓鼠找sugar 又是 LCA- 前两天死活写不过的一个题今天终于顺手切了. 思路嘛参考了一楼题解. 就是说,对于 a, b, c, d 四个点, 令 x = LCA(a, ...

  3. Java使用UDP发送数据到InfluxDB

    最近在做压测引擎相关的开发,需要将聚合数据发送到InfluxDB保存以便实时分析和控制QPS. 下面介绍对InfluxDB的使用. 什么是InfluxDB InfluxDB是一款用Go语言编写的开源分 ...

  4. 巧妙使用CSS创建可以打印的页面

    用CSS创建打印页面,不必为打印而专门建立一个HTML文件,可以节省一些体力,其前提是按“WEB标准”用CSS+DIV布局HTML页面. 第一.在HTML页面加入为打印机设置的CSS文件 <li ...

  5. 精心整理的十个必须要知道CSS+DIV技巧

    1.css font的简写规则  当我们写字体样式的时候,我们也许会这样子写 font-size: 1em; line-height: 1.5em; font-weight: bold; font-s ...

  6. Memcached与KVDB的区别

    Memcached将数据存储在内存中,数据易丢失,不适合对数据进行长期存储. KVDB则是将数据存储在磁盘中,数据安全性级别高,不易丢失.

  7. J - Borg Maze +getchar 的使用注意（二维字符数组的输入）

    题目链接: https://vjudge.net/contest/66965#problem/J 具体思路: 首先将每个点之间的最短距离求出(bfs),A 或者 S作为起点跑bfs,这样最短距离就求出 ...

  8. Spring笔记13--SSH--全注解开发

    SSH全注解开发: (1) 在Action类中添加注解,实现Struts2的注解开发(@NameSpace.@ParentPackage.@Action...) package com.tongji. ...

  9. 【C++】数组-二分法查找

    1.原理 对于给定值的查找,如果大于该数组的中间元素,下一步在元素值大的区域继续与其中间元素比较:否则下一步在元素值小的区域内继续查找,直到找到目标元素.如果到最后还没有找到,则输出"数组中 ...

  10. Count 1 in Binary

    Count how many 1 in binary representation of a 32-bit integer. Example Given 32, return 1 Given 5, r ...