具体实现

<!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. "\n" 与"\r" 区别

    关于换行和回车其实平时我们不太在意,所以关于两者的区别也不太清楚,在平时开发时可能会遇到一些文件处理的问题,放到不同的操作系统上出现各种坑.那么回车和换行到底有哪些区别呢?今天咱们就来总结一下. 1. ...

  2. 跨域问题 Uncaught DOMException: Blocked a frame with origin。。。

    第三方系统内嵌 到iframe中的 跨域问题. 解决方案: http://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html

  3. HDU 4135 容斥

    问a,b区间内与n互质个数,a,b<=1e15,n<=1e9 n才1e9考虑分解对因子的组合进行容斥,因为19个最小的不同素数乘积即已大于LL了,枚举状态复杂度不会很高.然后差分就好了. ...

  4. ZeroMQ API（一） 总序

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

  5. sql 存储时空格转成问号问题

    最近做系统,从邮件中导出邮件,上传到系统中,遇到一个奇葩的问题,如下: 通过本地文件看,文件名中是一个空格,上传至数据库后,展示就变成了问号,究其原因,发现是一个特殊字符导致: 最近认真去查了一下这个 ...

  6. js便携小方法，你值得拥有

    引言: 本章没有深奥的讲解js一些底层原理,比如this指针.作用域.原型啦,涉及的都是一些有利于平时开发时简化代码,提高执行效率,或者说可以当做一种经验方法来使用,篇幅都不长,小步快跑的让你阅读完整 ...

  7. react-music React全家桶项目，精品之作！

    React-Music 全家桶项目,精品之作! 一.简介 该项目是基于React全家桶开发的一个音乐播放器,技术栈采用:Webpack + React + React-redux + React-ro ...

  8. 解析html与xhtml的神器——HTMLParser与SGMLParser

    有时候你要把抓回来的数据进行提取,过大篇幅的html标签,你若使用正则表达式进行匹配的话,显然是低效的,这时使用python的HTMLParser模块会显得非常方便.据说还有个比较好用的解析器叫:Be ...

  9. ETL测试基本知识

    转载自: https://www.cnblogs.com/clarke157/p/6383024.html 一.ETL测试的重要性: ETL(Extract-Transform-Load的缩写,即数据 ...

  10. 【HDU】2191 多重背包问题

    原题目:悼念512汶川大地震遇难同胞——珍惜现在,感恩生活 [算法]多重背包(有限背包) 动态规划 [题解]http://blog.csdn.net/acdreamers/article/detail ...