Hi there I'm trying to build the current design

I used the skew transform but the whole div skewed not on border

tried using clip-path but I cant use border radius with it

any ideas?

CodePudding user response：

As the outline is just visual rather than having meaning we can add it without adding extra elements in the DOM. We can do this with CSS pseudo elements which paint the border - the top one being skewed, the bottom one not.

Essentially this snippet is using a combination of your two methods - skew and clip-path - to give this:

.container {
  background-color: pink;
  display: inline-block;
  padding: 2vmin;
}

.container>* {
  width: 20vmin;
  height: 10vmin;
  position: relative;
}

.container>*::before,
.container>*::after {
  content: '';
  top: 0;
  left: 0;
  border: 1px red solid;
  border-radius: 10px;
  width: 100%;
  height: 100%;
  position: absolute;
}

.container>*::before {
  transform: skew(0, -5deg);
  clip-path: polygon(0 0, 100% 0, 100% 80%, 0 80%);
}

.container>*::after {
  clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
}

<div class="container">
  <div></div>
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Try having another div as the container of your div, then use the skew transform on that. If that still skews the inner div, you can try having another div that has position: absolute; and position it over your div, then skweing it. It will have to be transparent.

CodePudding user response：

Try this:

div {
  position: relative;
  display: inline-block;
  padding: 1em 5em 1em 1em;
  overflow: hidden;
  color: #fff;
}

div:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  -webkit-transform-origin: 100% 0;
  -ms-transform-origin: 100% 0;
  transform-origin: 100% 0;
  -webkit-transform: skew(-45deg);
  -ms-transform: skew(-45deg);
  transform: skew(-45deg);
  z-index: -1;
}

<div>slanted div</div>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

And then just reverse it