How to make top and left border of a div slanted

Question

.container{
  max-width: 80%;
  margin:auto;
}
.section1{
  background: #541A81;
  padding: 60px 0;
}
.content{
  background:#ffffff;
  /* clip-path: polygon(0 90px, 100% 0, 100% 100%, 0 100%); */
  border: 7px dashed #FFFD54;
  border-radius: 50px;
  padding: 168px 60px 92px;
  transform: skew(10deg, 0);
}

<div class="section1">
  <div class="container">
      <div class="content">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit ad hic distinctio laboriosam iste neque quibusdam, adipisci sed magni explicabo nemo delectus nesciunt numquam non ducimus enim voluptatem ipsam! Esse!
        </p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus dolorum unde debitis quos velit repudiandae. Explicabo, veniam, totam? Consectetur eum ab veniam, consequatur nemo, beatae soluta blanditiis quas quos dicta.</p>
      </div>
  </div>
</div>

I tried skewing it, but it seems to be skewing the whole axis, I have also tried the clip-path approach (code is commented there), however, this clip method is also removing the border as well.

Hello dear, I think the best way to creat this type of card is to use HTML CANVAS: link — Saleh
– Saleh, Commented Sep 21, 2022 at 4:32
i will be adding some content there later. on that white box. so not sure if canvas could be the right options. — Aayush Dahal
– Aayush Dahal, Commented Sep 21, 2022 at 5:22
I found stuff like this recently that might help point you in the right direction. Someone else referred to it as deforming an HTML element using CSS which a google search presents a bunch of good results — async await
– async await, Commented Sep 21, 2022 at 5:32

jbutler483 · Accepted Answer · 2022-09-22 19:32:48Z

I certainly wouldn't recommend this, however you theoretically could achieve something similar using pseudo elements - albeit it could get a bit messy with the perspective css property to skew in 3D.

Using pseudo elements, you could stop the actual text becoming skewed as you only apply these to the pseudo elements rather than the whole element.

body {
  background: #541A81;
}

.wrap,
.light {
  perspective: 300px;
}

.light {
  position: absolute;
  top: 50px;
  left: 50px;
  display: inline-block;
  min-height: 200px;
  width: 500px;
  border-radius: 30px;
  padding: 30px;
}

.light:before,
.light:after {
  content: "";
  position: absolute;
  border-radius: inherit;
}

.light:after {
  top: 30px;
  left: 10px;
  height: calc(100% - 20px);
  width: 90%;
  background: rgba(0, 0, 0, 0.8);
  transform: rotateY(10deg) rotate(5deg);
  z-index: -5;
}

.light:before {
  top: 0;
  left: -50px;
  height: 100%;
  width: calc(100% + 55px);
  background: white;
  border: 7px dashed #FFFD54;
  box-sizing: border-box;
  transform: rotateY(-5deg) rotateX(2deg);
  z-index: -2;
}

<div class="wrap">
  <div class="light">
    hello! This text won't be skewed or messed up.
  </div>
</div>

Collectives™ on Stack Overflow

How to make top and left border of a div slanted

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related