伪元素影响剪辑路径

Posted 2023-02-25

【中文标题】伪元素影响剪辑路径

【英文标题】：pseudo-element affect clip-path

【发布时间】：2016-08-05 15:23:13

【问题描述】：

我正在尝试做一些看似简单但不适合我的事情。 我有一个带有微光悬停效果的简单按钮。我希望将相同的按钮效果应用于形状像六边形的按钮。我以为我会务实，只是用剪辑路径覆盖按钮（我不关心浏览器的支持）。但是，遗憾的是，伪元素会影响剪辑路径，使其无法使用。我错过了一些简单的东西吗？或者这两者的结合永远不会奏效？

.button 
outline:none;
border:none;
padding:20px;
display:block;
margin:0 auto;
cursor:pointer;
font-size:16px;
font-weight: bold;
background-color:#DBBD68;
text-transform: uppercase;
position:relative;
transition:all 0.5s ease;
overflow: hidden;
color:#fff;

&.hex
   width: 280px;
   height: 280px;
   position:absolute;
   top: 0;
   left:0;
   -webkit-clip-path: polygon(20% 50%, 12% 60%, 20% 70%, 82% 70%, 89% 60%, 80% 50%);
   clip-path: polygon(20% 50%, 12% 60%, 20% 70%, 82% 70%, 89% 60%, 80% 50%);
 
&:before 
    content: '';
    background-color: rgba(255,255,255,.5);
    width:100%;
    height:20px;
    position:absolute;
    left:-135px;
    transform: rotateZ(45deg)

我做了一个 Fiddle 来展示这个问题：https://jsfiddle.net/0m5wmvu8/

【参考方案1】：

你试图用 .hex 做一些疯狂的事情，但你唯一应该添加的是剪辑路径。只需将其更改为：

&.hex
    -webkit-clip-path: polygon(50% 0, 80% 0, 100% 50%, 80% 100%, 20% 100%, 0 50%, 20% 0);
    clip-path: polygon(50% 0, 80% 0, 100% 50%, 80% 100%, 20% 100%, 0 50%, 20% 0);

https://jsfiddle.net/8sfc3ott/