CODEWITHSUNDEEP
htmlcssclip
jansmolders86
jansmolders86

Reputation: 5759

pseudo-element affect clip-path

I'm trying to do something seemingly easy but its not working out for me. I have a simple button with a shimmer hover effect. I want have the same button effect applied to a button that is shaped like a hexagon. I thought I'd be pragmatic and just overlay the button with a clip-path (I don't care about the browser support). but, sadly the pseudo-element affect the clip-path making it unusable. Am I missing something simple? Or will the combination of these two never work? 

.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)
}

I made a Fiddle to showcase the issue: https://jsfiddle.net/0m5wmvu8/

Upvotes: 2

Views: 2236

Answers (1)

Max
Max

Reputation: 66

You tried to do something crazy with .hex, but the only thing you should have added was the clip-path. Just change it to:

&.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/

Upvotes: 1

Related Questions