How can i make a skewed slanting div box

Question

Hello I am a beginner in CSS and HTML. I would like to create something a div like this for my school project.

I tried the transform:skewed(25deg) but it wont make my box div balance.

So many ways to solve this. Properly the easiest way would be `SVG` or `clip-path` — tacoshy, May 21 '22 at 00:48
@ZachJensz thanks for suggestion. Is there anyway where i can make it with just two divs? — John, May 21 '22 at 00:48
@tacoshy appreciated with your response. I just want to do with CSS only because this topic is intended for using CSS only — John, May 21 '22 at 00:49
https://jsfiddle.net/bzcanjxr/2/ @tacoshy can you help me why my top border isn't completed with clip-path — John, May 21 '22 at 00:59
because that is not how `clip-path` or border works... just google for clip-path border or search SO for it. You have a duplicate here as example: https://stackoverflow.com/questions/31854185/how-to-add-border-in-my-clip-path-polygon-css-style — tacoshy, May 21 '22 at 01:00

score 2 · Accepted Answer · answered May 21 '22 at 01:09

As the comments mention, you can achieve that kind of slant by using clip-path. You just need to make sure to match the path on both your inner + outer elements in order for the border to line up correctly.

.outside {
  position: relative;
  width: 70vmin;
  height: 70vmin;
  background: red;
  -webkit-clip-path: polygon(0 0, 100% 10%, 100% 100%, 0% 100%);
  clip-path: polygon(0 0, 100% 10%, 100% 100%, 0% 100%);
}

.inside {
  position: absolute;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
  background: black;
  -webkit-clip-path: polygon(0 0, 100% 10%, 100% 100%, 0% 100%);
  clip-path: polygon(0 0, 100% 10%, 100% 100%, 0% 100%);
}

<div class="outside">
  <div class="inside"></div>
</div>

however this will not allow for a transparent background inside — tacoshy, May 21 '22 at 01:23

tacoshy · Answer 2 · 2022-05-21T02:49:13.977

If you need a transparent background simliar to the picture you ahve you have to use 2 elements for the top and the bottom and cut it away like this:

:root {
  --thickness: 10px;
  --color: red;
  --width: 50vw;
  --total-height: 80vh;
  --offset-height: 20vh;
}

.clip-path-top {
  width: var(--width);
  height: var(--offset-height);
  background-color: var(--color);
  clip-path: polygon(0 0, var(--thickness) 0, 100% calc(100% - var(--thickness)), 100% 100%, calc(100% - var(--thickness)) 100%, var(--thickness) var(--thickness), var(--thickness) 100%, 0 100%);
}

.clip-path-bottom {
  width: var(--width);
  height: calc(var(--total-height) - var(--offset-height));
  background-color: var(--color);
  clip-path: polygon(0 0, var(--thickness) 0, var(--thickness) calc(100% - var(--thickness)), calc(100% - var(--thickness)) calc(100% - var(--thickness)), calc(100% - var(--thickness)) 0, 100% 0, 100% 100%, 0 100%);
}


/* for demo-purpose only */
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: gray;
}

<div class="clip-path-top"></div>
<div class="clip-path-bottom"></div>

score 0 · Answer 3 · answered May 21 '22 at 13:17

Apply the skew to a pseudo element:

.box {
  width: 250px;
  height: 250px;
  border-bottom: 5px solid red;
  position: relative;
  overflow: hidden;
}

.box:before {
  content: "";
  position: absolute;
  inset: 0;
  border: 5px solid red;
  border-bottom: none;
  transform-origin: left;
  transform: skewY(10deg); /* adjust this */
}

<div class="box"></div>

How can i make a skewed slanting div box

3 Answers3