How can i make a skewed slanting div box-CodePudding

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.

CodePudding user response：

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 >
  <div ></div>
</div>

CodePudding user response：

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 ></div>
<div ></div>