CSS Element with sloped borders [duplicate] - html

Question

I'm trying to replicate a graphical design using css, but I have failed for responsive, I can achieve an static form but with tiny defects (due to putting together two elements).
This is the graphical design:
I prefer it a bit more tilted, like: skew(-40deg). But the idea is to have an inner rounded border that wraps that key-button just like in the image.
The html is simple:
<header>
<nav></nav>
</header>
The css:
body > header > nav {
display: flex;
align-items: flex-end;
justify-content: center;
width: 100vw;
height: 90px;
padding: 10px 0;
text-align: center;
z-index: 1
}
body > header > nav::before {
content: '';
position: absolute;
top: 0; left: 0;
width: 80vw; height: 100%;
background-color: rgb(147, 147, 147);
border-bottom-right-radius: 15px;
transform: skew(-40deg);
transform-origin: 100% 0%;
}
body > header > nav::after {
content: '';
position: absolute;
top: 0; right: 0;
width: 28.7%;
border-top: 7px solid rgb(147, 147, 147);
border-left: 50px solid rgb(147, 147, 147);
height: 75px;
border-top-left-radius: 75px;
transform: skew(-33deg);
}
I've prepared a https://jsfiddle.net/uj4qsf37/
Is there a cleaner way to do this? Like not having to use two elements? With one element it would be easy to make it responsive.

Answer 1

I would do it like this:
.header {
border-top: 20px solid blue;
height:100px;
position: relative;
overflow: hidden;
}
.header:before,
.header:after {
content: "";
vertical-align:top;
display: inline-block;
transform-origin: top right;
transform: skew(-40deg);
}
.header:before {
height: 100%;
width: 50%;
border-radius: 0 0 20px 0;
background: blue;
}
.header:after {
height: 20px;
width: 20px;
margin-left:-1px;
background: radial-gradient(circle at bottom right, transparent 68%, blue 73%);
}
/*to illustrate different values of skew*/
.header:before,
.header:after {
animation:change 2s linear infinite alternate;
}
#keyframes change{
from{transform: skew(0deg);}
top{transform: skew(-40deg);}
}
<div class="header"></div>