具体实现

<!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. 用canvas绘制验证码

    在通常的登录界面我们都可以看到验证码,验证码的作用是检测是不是人在操作,防止机器等非人操作,防止数据库被轻而易举的攻破. 验证码一般用PHP和java等后端语言编写: 但是在前端,用canva或者SV ...

  2. Android studio 使用flutter插件 运行第一个flutter项目 报错 Warning: License for package Android SDK Build-Tools 28.0.3 not accepted.

    在Android studio中新建了flutter项目.运行报错licence not accepted. Warning: License for package Android SDK Buil ...

  3. Docker容器加载宿主机的hosts解析

    前言 公司一直在用传统的tomcat下丢war包的架构体系,随着项目的增多.服务器数量的增多.需要为此花费很多时间在不同服务器的系统环境问题上.为了技术的与时俱进和工作的运维效率等方面,笔者引入doc ...

  4. TED_Topic6：How to raise a black son in America

    By Clint Smith As kids, we all get advice from parents and teachers that seems strange, even confusi ...

  5. 双击CAD对象，显示自定义对话框实现方法

    class TlsApplication : IExtensionApplication { void IExtensionApplication.Initialize() { TTest.Start ...

  6. 【bzoj题解】2186 莎拉公主的困惑

    题目传送门. 题意:求\([1,n!]\)中与\(m!\)互质的数的个数,对质数\(R\)取模,\(n\geq m\). 答案应该等于\(\frac{n!}{m!}\phi(m!)=\frac{n!} ...

  7. 深拷贝数组 np.copy

    数组对象自带了浅拷贝和深拷贝的方法,但是一般用深拷贝多一些: 代码如下: >>> a = np.ones((2,2)) >>> b = a >>> ...

  8. Oracle和MySQL的高可用方案对比【转】

    关于Oracle和MySQL的高可用方案,其实一直想要总结了,就会分为几个系列来简单说说.通过这样的对比,会对两种数据库架构设计上的细节差异有一个基本的认识.Oracle有一套很成熟的解决方案.用我在 ...

  9. python 根据输入的内容输出类型

    类型判断 from functools import singledispatch import numbers from collections import abc from collection ...

  10. ArcGIS RunTime Sdk +WPF 基础地图显示

    1 简单的地图展示 ArcGISRunTime 的平面地图展示主要依赖MapView这个控件,MapView是地图的容器,Map主要是图层的集合 (注:三维场景的显示主要依赖SceneView这个控件 ...