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

Question

I want to create border like in the below image:

I had written this code

<p>Some Text</p>

p{
  -webkit-transform: perspective(158px) rotateX(338deg);
  -webkit-transform-origin: right;
  border: 2px dashed red;
}

But this code doesn't return the output that I expect and is different from the image. I want to skew the top part of the left border like in the image. border corner. how i can create border with attached image style? thank's

Answer 1

You could also make a mixed of borders, background gradient and use a pseudo to push a bit the text and draw the diagonal dashed border :

p {
  text-indent:1.5em;
  margin:1em;
  padding:0.5em;
  width:36em;
  border:4px dashed red;
  border-top:none;
  border-left:none;
  background:repeating-linear-gradient(to left,transparent 0,transparent 10px, red 10px, red 20px) no-repeat top right,
    repeating-linear-gradient(to bottom,transparent 0,transparent 10px, red 10px, red 20px) no-repeat bottom left;
    ;
  background-size:88% 4px, 4px 80%, 100% 3px;
  overflow:hidden;
  text-align:justify;
}
p:before {
  content:'';
  padding:3% 4%;
  margin-right:-2em;
  float:left;
  border-bottom:dashed 4px red;
  transform-origin: bottom left;
  transform:rotate(-35deg);
}

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>

codepen to play with

Answer 2

Using CSS:

You can do this with a single element using a couple of pseudos and dashed borders.

The shape is formed as follows:

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

The output is also responsive as you can see by hovering on the 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;
}
/* just for demo */

div {
  transition: all 1s ease;
}
div:hover {
  height: 120px;
  width: 300px;
}

<div></div>

---

Using SVG:

This can be created using SVG also. All that is needed is a path (or a polygon) in required shape and then set stroke-dasharray on the path to create a 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>

Answer 3

If you need a diagonal border, you can stack 2 divs with each a pseudo element:

DEMO

HTML

<div id="grey"></div>
<div class="container">
  <div class="diagonal">
    <h2>Header title</h2>
    <p>Yes a CSS diagonal corner is possible</p>
  </div>
  <div class="diagonal2">
    <h2>Header title</h2>
    <p>Yes a CSS diagonal corner with background image is possible</p>
  </div>
  <div class="diagonal3">
    <div class="inside">
      <h2>Header title</h2>
      <p>Yes a CSS diagonal border is even possible with an extra div</p>
    </div>
  </div>
</div>

CSS

 .container {
  padding: 100px 200px;
  overflow: hidden;
}

div.diagonal {
  background: #da1d00;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  width: 300px;
  height: 300px;
  padding: 70px;
  position: relative;
  margin: 30px;
  float: left;
}

div.diagonal2 {
  background: #da1d00;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  width: 300px;
  height: 300px;
  padding: 70px;
  position: relative;
  margin: 30px;
  background: #da1d00 url(http://www.remcokalf.nl/background.jpg) left top;
  background-size: cover;
  float: left;
}

div.diagonal3 {
  background: #da1d00;
  color: #da1d00;
  font-family: Arial, Helvetica, sans-serif;
  width: 432px;
  height: 432px;
  padding: 4px;
  position: relative;
  margin: 30px;
  float: left;
}

div.inside {
  background: #fff;
  color: #da1d00;
  font-family: Arial, Helvetica, sans-serif;
  width: 292px;
  height: 292px;
  padding: 70px;
  position: relative;
}

div.diagonal:before,
div.diagonal2:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  border-top: 80px solid #fff;
  border-right: 80px solid transparent;
  width: 0;
}

div.diagonal3:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  border-top: 80px solid #da1d00;
  border-right: 80px solid transparent;
  width: 0;
  z-index: 1;
}

div.inside:before {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  border-top: 74px solid #fff;
  border-right: 74px solid transparent;
  width: 0;
  z-index: 2;
}

h2 {
  font-size: 30px;
  line-height: 1.3em;
  margin-bottom: 1em;
  position: relative;
  z-index: 1000;
}

p {
  font-size: 16px;
  line-height: 1.6em;
  margin-bottom: 1.8em;
}

#grey {
  width: 100%;
  height: 400px;
  background: #ccc;
  position: relative;
  margin-top: 100px;
}

#grey:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  border-top: 80px solid #fff;
  border-right: 80px solid #ccc;
  width: 400px;
}