CSS实现带阴影效果的三角形
具体实现
<!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实现带阴影效果的三角形的更多相关文章
- css写带边框的三角形
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 用CSS画一个带阴影的三角形的示例代码
1. 思路 怎么用CSS3画一个带阴影的三角形呢 ? 有童鞋说, 这还不简单吗 网上有很多解决方案, 但其实大多都是实现不太完美的, 存在一些问题 假设我们做一个向下的三角形箭头 常见的方法大致有两种 ...
- CSS 奇思妙想 | 巧妙的实现带圆角的三角形
之前在这篇文章中 -- <老生常谈之 CSS 实现三角形>,介绍了 6 种使用 CSS 实现三角形的方式. 但是其中漏掉了一个非常重要的场景,如何使用纯 CSS 实现带圆角的三角形呢?,像 ...
- css挤带边框的三角
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- css实现带箭头选项卡
这阵子在做一个web端项目中遇到一个问题,需要实现带箭头的选项卡点击可切换.起初没想太多,直接切一个向上的小箭头图片,外层div设置相同颜色的边框,再用相对定位和绝对定位.这种方法是可行的,但是因为手 ...
- 纯css写带小三角对话框
在实际样式中经常会遇到要写类似对话框的样式,而这种样式往往会有一个小三角,如下所示: 那么如何用css写出来呢,其实很简单,先让父元素相对定位,然后运用css的伪类before或after.就可以写个 ...
- 使用纯CSS实现带箭头的提示框
爱编程爱分享,原创文章,转载请注明出处,谢谢!http://www.cnblogs.com/fozero/p/6187323.html 1.全部代码 <!DOCTYPE html> < ...
- css兼容各个浏览器的三角形图标
css兼容各个浏览器的三角形图标 在当前流行的的网站上,我们经常会看到一些小三角形的下拉提示(微博顶部的下拉菜单),简单的方式可以使用一张图片代替,但是随着前端技术的发展,以及开发者对于前端性能的“吹 ...
- js+css实现带缓冲效果右键弹出菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- Django 2.0.1 官方文档翻译: 编写你的第一个 Django app，第四部分（Page 9）
编写你的第一个 Django app,第四部分(Page 9)转载请注明链接地址 该教程上接前面的第三部分.我们会继续开发 web-poll 应用,并专注于简单的表单处理和简化代码. 写一个简单的表单 ...
- soj2012.King（有向图+蛋疼得一逼）
Description There are n children in a country marked by integers from 1 to n. They often fight with ...
- 并发编程(三) IO模型
五 IO模型 常用的IO模型有4种: 阻塞IO 非阻塞IO IO多路复用 异步IO 不常用的有: 驱动信号 5.1 阻塞IO.非阻塞IO 阻塞IO:进程不能做其他的事情 非阻塞IO:等待数据无阻塞 阻 ...
- MySQL中JSON字段的使用技巧
mysql5.7.8之后开始原生支持json. 在类似mongodb这种nosql数据库中,json存储数据是非常自然的, 在mysql中合理的使用json,能够带来极大的便利 Json字段的使用场景 ...
- 【leetcode 简单】 第七十三题 丑数
编写一个程序判断给定的数是否为丑数. 丑数就是只包含质因数 2, 3, 5 的正整数. 示例 1: 输入: 6 输出: true 解释: 6 = 2 × 3 示例 2: 输入: 8 输出: true ...
- 【译】第七篇 Integration Services：中级工作流管理
本篇文章是Integration Services系列的第七篇,详细内容请参考原文. 简介在上一篇文章,我们创建了一个新的SSIS包,学习了SSIS中的脚本任务和优先约束,并检查包的MaxConcur ...
- 通过BurpSuite和sqlmap配合对dvwa进行sql注入测试和用户名密码暴力破解
0x1 工具和环境介绍 dvwa:渗透测试环境 BurpSuite:强大的WEB安全测试工具 sqlmap:强大的sql注入工具 以上工具和环境都在kali linux上安装和配置. 0x2 步骤说明 ...
- CentOS7最小化安装之后无法联网以及无法使用ifconfig以及无法使用yum安装软件
无法联网解决办法,CentOS-7默认网卡未激活,进入BOOS设置修改,或者直接修改配置文件,然后重启服务 1 修改网卡配置文件: 激活: 2 重启服务即可: service network rest ...
- java后台中处理图片辅助类汇总(上传图片到服务器,从服务器下载图片保存到本地,缩放图片,copy图片,往图片添加水印图片或者文字,生成二维码,删除图片等)
最近工作中处理小程序宝箱活动,需要java画海报,所以把这块都快百度遍了,记录一下处理的方法,百度博客上面也有不少坑! 获取本地图片路径: String bgPath = Thread.current ...
- Oracle和MySQL的高可用方案对比【转】
关于Oracle和MySQL的高可用方案,其实一直想要总结了,就会分为几个系列来简单说说.通过这样的对比,会对两种数据库架构设计上的细节差异有一个基本的认识.Oracle有一套很成熟的解决方案.用我在 ...