How to make top and left border of a div slanted - html

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.

Answer 1

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>