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/ ...
随机推荐
- call 大佬 三分姿势
为什么注释掉的三分方式不能过 @大佬 题目来源:http://hihocoder.com/problemset/problem/1142?sid=1003381 貌似不是eps的问题 #include ...
- Linux块设备和字符设备
块设备:系统能够随机无序访问固定大小的数据片的设备,这些数据片称为块.块设备是以固定大小长度来传送资料的,它使用缓冲区暂存数据,时机成熟后从缓存中一次性写入到设备或者从设备中一次性放到缓存区.常见的块 ...
- 2017ACM暑期多校联合训练 - Team 9 1005 HDU 6165 FFF at Valentine (dfs)
题目链接 Problem Description At Valentine's eve, Shylock and Lucar were enjoying their time as any other ...
- jquery $.post() 向php传值 实现简单的二级联动
更多内容推荐微信公众号,欢迎关注: 1 其中selectid是一个下拉菜单的id $().ready(function () { $("#selectid").change(fun ...
- html5 构造网页的新方式
从 html 诞生至今,我们构建 html 页面的使用 html 元素好像并没有太多的进步.在构建 html 页面中,用的最多的是 div 标签.但是应用 div 标签构建 html 页面有一个问题, ...
- 判断最小生成树是否为一（krustra）
题目链接:https://vjudge.net/contest/66965#problem/K 具体思路: 首先跑一遍最短路算法,然后将使用到的边标记一下,同时使用一个数组记录每一个权值出现的次数,如 ...
- 【矩阵】RQ/QR 分解
Multiple View Geometry in Computer Vision A.4.1.1 (page 579) 将一个 3x3 矩阵 $ A $ 进行 RQ 分解是将其分解成为一个上三角阵 ...
- CentOS配置163yum源
1.下载repo文件 wget http://mirrors.163.com/.help/CentOS6-Base-163.repo 2.备份并替换系统的repo文件 [root@localhost ...
- git clone直接提交用户名和密码
git使用用户名密码clone的方式: git clone http://username:password@remote 例如:我的用户名是abc@qq.com,密码是abc123456,git地址 ...
- Python 使用 Redis 操作
1.redis简介 redis是一款开源免费的高性能key-value数据库,redis特点: 支持更多的数据类型:字符串(String).列表(List).哈希(Map).数字(Int).集合(Se ...