Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

css skew element and get inner rounded border top

Tags:

css

css-shapes

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:

enter image description here

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.

like image 470
Chazy Chaz Avatar asked Jun 28 '18 14:06

Chazy Chaz


1 Answers

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>
like image 130
Temani Afif Avatar answered Oct 04 '22 17:10

Temani Afif