CSS实现带阴影效果的三角形

目标效果

用将width和height设置为0，通过border特性来实现三角形的效果的方法，想必很多人都实现过。
但是如果要求三角形边缘具有阴影效果，这样一来以前的实现方式显然是不行，因为box-shadow属性对border内部的边缘是没有效果的。
今天公司的交互图上正好要实现这种效果，经过一番搜寻和思考，最终通过一种在原来的方式上稍作升级的方式实现了这一效果。
实现的关键就是给border-top和border-right两个三角形同时设置颜色，将两个小三角形融合成一个大的三角形，然后通过transform进行旋转操作，将盒模型原本的两条边作为三角形的腰，对外展示，再对其设置box-shadow效果，实现阴影效果。

具体实现

<!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>

运行结果

CSS实现带阴影效果的三角形相关推荐

用 CSS 画一个带阴影的三角形
1. 思路怎么用CSS画一个带阴影的三角形呢 ? 有童鞋说, 这还不简单吗网上有很多解决方案, 但其实大多都是实现不太完美的, 存在一些问题假设我们做一个向下的三角形箭头常见的方法大致有两种 ...
css加三角阴影,用CSS画一个带阴影的三角形的示例代码
1. 思路怎么用CSS3画一个带阴影的三角形呢 ? 有童鞋说, 这还不简单吗网上有很多解决方案, 但其实大多都是实现不太完美的, 存在一些问题假设我们做一个向下的三角形箭头常见的方法大致有两种 ...
CSS 奇思妙想 | 巧妙的实现带圆角的三角形
但是其中漏掉了一个非常重要的场景,如何使用纯 CSS 实现带圆角的三角形呢?,像是这样: A triangle with rounded 本文将介绍几种实现带圆角的三角形的实现方式. 法一. 全兼容的 ...
CSS边框外的小三角形+阴影效果的实现。
本文转载于:猿2048网站CSS边框外的小三角形+阴影效果的实现. ...虽然是一个很小的问题,但其实还是挺实用的. 实现一个边框外的角. 用纯CSS来写. 一开始实现的效果是这个样子的. 但是这个效 ...
CSS如何添加阴影效果？
在CSS中可以使用阴影效果属性在HTML文档中添加文本和边框(图像)阴影.下面本篇文章就来给大家介绍一下CSS的阴影效果属性,CSS添加阴影效果的方法,希望对大家有所帮助. 1.添加文本阴影在CSS ...
html画一条线并带箭头,手把手教你用CSS实现带箭头的流程进度条
本文介绍的是利用纯CSS的带箭头流程进度条,兼容到IE8,需要的朋友们下面来一起学习学习. 首先写出一个基本的样式. .cssNav li{ padding: 0px 20px; line-heigh ...
android三角形切图软件,还在为小三角形切图？使用纯CSS写一个简单的三角形
同学们,当美工给的设计图是这样: 或者这样: 我的内心其实是拒绝的-_-:但工作还得干,大部分同学会写 .icon{width:20px;height:20px;display:block;margi ...
纯CSS实现带小三角提示框
要实现在页面上点击指定元素时,弹出一个信息提示框.在前面的文章中,我们已经简单介绍了如何使用纯 CSS 创建一个三角形.本文在此基础上,记录如何使用 CSS 创建带三角形的提示框. 实现的原理是创建一 ...
CALayer 知识：创建带阴影效果的圆角图片图层和创建自定义绘画内容图层
效果如下: KMLayerDelegate.h 1 #import <UIKit/UIKit.h> 2 3 @interface KMLayerDelegate : NSObject 4 ...

CSS实现带阴影效果的三角形

目标效果

具体实现

运行结果

CSS实现带阴影效果的三角形相关推荐

最新文章

热门文章