css div with one diagonal border - html

Question

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?

Answer 1

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>

Answer 2

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.

Answer 3

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>
And then just reverse it