.btn-wrap {
margin: auto;
filter: drop-shadow(2px 4px 3px rgba(50, 50, 0, 0.5));
.btn{
content: "";
width: 200px;
height: 64px;
line-height: 64px;
text-align: center;
background: linear-gradient(#f5e5bf, #fbe8c8, #f5e5bf);
color: #be9451;
font-size: 24px;
clip-path: polygon(10% 0%, 90% 0%, 100% 50%, 90% 100%, 10% 100%, 0 50%);
<div class="btn-wrap">
<div class="btn">领取红包</div>
</div>
本文首发于 我的博客
曾经和某位朋友在聊天中讨论过这样一个话题：综合90%的网站的布局以及页面中的元素不是方的，就是圆的。就像所有的颜色都是由三原色（RGB）构成的一样，所有规则的形状似乎也都是由方和圆组成的；抛开设计效果的好看与否不说，似乎不规则的设计在实现（CSS）成本上也是一个麻烦，毕竟在CSS3之前，我们实现一个圆都要切图，更何况...
clip-pathCSS 属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示，区域外的隐藏。剪切区域是被引用内嵌的URL定义的路径或者外部svg的路径，或者作为一个形状。clip-path属性代替了现在已经弃用的剪切clip属性。
clip-source|basic-shape|geometry-box|none
clip-path是一个CSS属性，剪切路径，允许用不同的剪切方式创建元素的可显示区域，区域内的内容可以展示，区域外的内容则隐藏。它的基本取值可以有圆形(circle)、椭圆(ellipse)、多边形(polygon)、矩形(inset)，使用它们可以绘制各种不同的形状。
如图所示,整个边框的折线是用clip-path实现的,使用box-shadow做阴影的话右上角及右下角的阴影是会被裁剪掉的,尝试了一些常规办法都实现不了,每次到这种时候,心里一定要暗示自己:css的奇技淫巧都是"障眼法"…
解决方案就是在右下角和右上角再分别绘制一个把方块补齐的多边形,给多边形加drop-shadow属性添加外阴影.这样就只有阴影部分被边框的clip-path裁剪进来,实现上述效果.
代码如下,是一个vue组件,能够自适应不同的内容
<template>
//这是添加斜切角
linear-gradient(-45deg, transparent 12px, #5bdcfa 0) right(如果多个角要切用逗号隔开再加一行),
linear-gradient(135deg, transparent 12px, #5bdcfa 0) left;(方向和角度可以自行调整)
//这是内阴影
box-shadow: inset 0 0 14px 3px #01aceb;(有内阴影但是无法兼顾切角)
//这是使用clip-path剪切掉多余的部分
《CSS Secrets》是@Lea Verou最新著作，这本书讲解了有关于CSS中一些小秘密。是一本CSSer值得一读的一本书，经过一段时间的阅读，我、@南北和@彦子一起将在W3cplus发布一系列相关的读后感，与大家一起分享。问题当我们想要为矩形或任何可以用border-radius创建的形状应用投影的时候，box-shadow是非常棒的。但是，当我们有伪元素或其他半透明的样式的时候，它可能就...
一个方便实现效果的网站：
http://bennettfeely.com/clippy/
记得用chrome浏览器打开，然后写的时候记得加上兼容，如果是手机页面上的话就不用浏览器兼容了
（0） 为故障霓虹灯盒子添加before和after，两者content="赛博朋克 2077"重叠显示
（1） 字体橙色与绿色的边缘使用 box-shadow: 水平距离 垂直距离 阴影大小 颜色实现
（3） 鼠标划入触发故障动画
（4） 故障动画原理是使用 CSS3 clip-path 属性实现
clip-path 作用是指定显示区域大小
clip-path: top left bottom right;
（5） 当前 gif 效果是 从上到下 显示区域变化 并且 trans
CSS的clip-path属性是你改变传统单调的盒子布局，走向响应式设计的通行证。你将开始摆脱条条框框，自由地在您的网页上使用六边形、星形和八边形等等进行设计。一旦你真正开始使用clip-path，你可以生成的形状是无限多
我们经常使用MPchart来绘制各种类型的图表，非常好用。可以设置各种各样的样式。但是有时候满足不了我们的需求或者我们需要绘制的曲线很简单但是MPchart jar包不小，所以我们需要自定义view自己来绘制Path实现。通过Path绘制曲线比较简单，但是Path下的阴影还没有去实现过。
绘制曲线比较简单，Path有方法可以直接绘制：
public void line
原文地址:聊聊clip-path
图片是一个网站必不可少的元素，而呈现出绚丽多彩的图片效果在很多情况下不仅仅是设计师的工作，通过代码来修饰图片也是一个前端工程师必备的技能。因为兼容性的问题，实际项目中可能用的比较少，包括博主自己也只是用过几次剪切，很多情况下都交给设计师去做了。但作为一个hacker怎么能满足于此呢，必须深入探究！
Flilte...
上一篇用canvas去实现碎裂的效果，优点在于性能流畅，缺点在于无法显示3D效果(没有去尝试WebGL碎裂的研究……)、碎裂的实现也挺麻烦的，毕竟canvas中的clip只是获取绘图区域的一部分子区域，而并不是将某个元素取部分碎片，今天说的clip-path就不一样啦，我本身很喜欢用这个去实现碎裂
不了解clip-path可点击链接参考了解：http://www.w3cplus.com/css3...
