html - Dashed border around an element with the top part of left border being skewed/angled -

i want create border in below image:

i had written code

<p>some text</p>  p{   -webkit-transform: perspective(158px) rotatex(338deg);   -webkit-transform-origin: right;   border: 2px dashed red; } 

but code doesn't return output expect , different image. want skew top part of left border in image. border corner. how can create border attached image style? thank's

using css:

you can single element using couple of pseudos , dashed borders.

the shape formed follows:

• the borders on bottom , left side (apart skewed part) of element created using dashed borders on parent element.
• the border on top of element created using :after pseudo-element. pseudo element 40px less in width compared parent because top border starts after skewed border area. element 40px in height , positioned above container using absolute positioning.
• the border on right side created partially parent element , partially :after pseudo-element.
• the skewed area of border created using rotated :before psuedo element. height , width of element calculated using trigonometry formula calculating hypotenuse of right angled triangle.

the output responsive can see hovering on div.

div {    position: relative;    height: 60px;    width: 200px;    border: 3px dashed red;    border-width: 0px 3px 3px 3px;    margin-top: 80px;  }  div:after {    position: absolute;    content: '';    height: 40px;    width: calc(100% - 40px);    top: -40px;    left: 40px;    border-top: 3px dashed red;    border-right: 3px dashed red;  }  div:before {    position: absolute;    content: '';    height: 56.56px;    width: 56.56px;    top: 0%;    left: -3px;    border-top: 3px dashed red;    transform: rotate(-45deg);    transform-origin: left top;  }  /* demo */    div {    transition: 1s ease;  }  div:hover {    height: 120px;    width: 300px;  }

<div></div>

---

using svg:

this can created using svg also. needed path (or polygon) in required shape , set stroke-dasharray on path create dashed stroke.

div {    position: relative;    height: 100px;    width: 300px;  }  svg {    position: absolute;    height: 100%;    width: 100%;    top: 0;    left: 0;  }  path {    fill: none;    stroke: red;    stroke-width: 2;    stroke-dasharray: 10;  }

<div>    <svg viewbox='0 0 300 100' preserveaspectratio='none'>      <path d='m40,2 298,2 298,98 2,98 2,40z' vector-effect='non-scaling-stroke' />    </svg>  </div>