Issue
So the picture above is what I am trying to achieve . And this is what I've gotten:
My issue is I can't quite get the upper edges to wrap around correctly, they feel too sharp. I've played around a lot with clip-path
but i'm unsure if clip-path
is the best method to use for this or if there's better methods.
.center-nav-menu {
width: 15rem;
overflow:hidden;
clip-path: polygon(0 0, 100% 0, 100% 25%, 75% 100%, 25% 100%, 0 25%)
}
.button-default {
color: white;
text-align: center;
text-transform: uppercase;
padding: 9px 14px;
display: inline-block;
border-radius: 8px;
background-color: #565565;
}
The html is just a basic
<div :class="itemClasses">
<span>{{ label }}</span>
</div>
Anyone have any links or suggestions? Is clip-path the correct way? I thought about also just "faking" it with a background image too. But just wanted some advice. Thank you
Solution
I would consider a skew transformation applied on pseudo elements
button {
--r: .7em; /* the radius */
--a: 10deg; /* the curvature */
padding: .6em 1.5em;
font-size: 30px;
border: none;
background: none;
position: relative;
z-index: 0;
color: #fff;
}
button:before,
button:after {
content: "";
position: absolute;
z-index: -1;
inset-block: 0;
width: 50%;
background: red content-box; /* background color */
border: 2px solid red; /* border */
padding: 5px; /* space between border and background*/
transform-origin: top;
}
button:before {
left: 0;
border-right: 0;
transform: skewX(var(--a));
border-radius: var(--r) 0 0 var(--r);
}
button:after {
right: 0;
border-left: 0;
transform: skewX(calc(-1*var(--a)));
border-radius: 0 var(--r) var(--r) 0;
}
<button>Play</button>
Answered By - Temani Afif
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.