具体实现

<!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. bzoj千题计划163：bzoj1060: [ZJOI2007]时态同步

    http://www.lydsy.com/JudgeOnline/problem.php?id=1060 以激发器所在节点为根 终止节点一定是叶节点 记录点的子树内最深的终止节点 然后从根往下使用道具 ...

  2. Java事件基础

    package cn.Douzi.Event; import javax.swing.*; import java.awt.*; import java.awt.event.*; public cla ...

  3. springboot 以jar方式在linux后台运行

    linux命令如下: nohup java -jar 自己的springboot项目.jar >日志文件名.log 2>&1 & 命令解释: nohup:不挂断地运行命令, ...

  4. zz图像卷积与滤波的一些知识点

    Xinwei: 写的通俗易懂,终于让我这个不搞CV.不搞图像的外行理解卷积和滤波了. 图像卷积与滤波的一些知识点 zouxy09@qq.com http://blog.csdn.net/zouxy09 ...

  5. Java解决LeetCode72题 Edit Distance

    题目描述 地址 : https://leetcode.com/problems/edit-distance/description/ 思路 使用dp[i][j]用来表示word1的0~i-1.word ...

  6. Hbase建模选择

    日期 2017年3月17日 HBase建模记录 OLTP 应用场景: OLAP 应用场景: 语音分析系统的应用场景 基于HBase的建模考虑 1.话单为主来考虑hbase的rowkey的生成规则: 1 ...

  7. 使用win10 hyper-v安装linux系统

    1.控制面板---程序---启动或关闭windows功能---启动hyper-v管理器---重启 2.配置网络 因为公司内网通过ip验证,而通过桥接的方式,虚拟机就相当于物理机所在的网络中的一台真实主 ...

  8. Win7下VS2010不能链接问题

    装了2012准备学VC++窗体开发,然后发现手边只有VS2010的教程,于是卸掉VS2012改装VS2010,结果发现不管写啥,链接时都报错“error Link1123 转到coff期间失败”. 于 ...

  9. 编写高效的JavaScript程序

    作者: Addy Osmani  来源: CSDN  发布时间: 2013-01-10 14:15  阅读: 7952 次  推荐: 15   原文链接   [收藏] 英文原文:Writing Fas ...

  10. Linux压缩打包方法连载之三：bzip2, bzcat 命令

    Linux压缩打包方法有多种,本文集中讲解了bzip2, bzcat 命令的使用.案例说明,例如# 与 gzip 同样的,都是在计算压缩比的参数,-9 最佳,-1 最快. AD: 我们遇见Linux压 ...