Skewed top-left border surrounds the element with a dashed design

Question

Skewed top-left border surrounds the element with a dashed design

I'm looking to achieve a border effect similar to the one shown in the image linked below:

https://i.sstatic.net/a4hCQ.jpg

Here is the code I have tried so far:

<p>Some Text</p>

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

However, this code is not producing the desired output and does not match the image. I specifically want to skew the top part of the left border as shown in the image. Can someone please guide me on how to achieve this particular border style?

html css border css-shapes

Answer 1

Answer №1

Utilizing CSS for Styling:

A creative design can be achieved with just a single element by leveraging pseudo-elements and dashed borders in CSS.

The shape is constructed in the following manner:

The bottom and left borders (excluding the skewed part) of the element are generated using dashed borders on the parent element.
The top border of the element is crafted utilizing the :after pseudo-element, which is slightly narrower than the parent to align with the skew area. This pseudo-element is positioned above the container through absolute positioning.
The right border is a combination of the parent element's section and the :after pseudo-element.
To create the skewed border segment, a rotated :before pseudo-element is employed. The dimensions of this element are calculated based on trigonometric formulae for determining the hypotenuse of a right-angled triangle.

The result is responsive as confirmed when hovering over 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>

Employing SVG for Visuals:

This artistic representation can also be achieved using Scalable Vector Graphics (SVG). Simply define a path or polygon in the desired shape and set stroke-dasharray on the path for creating a dashed stroke effect.

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 2

Utilizing CSS for Styling:

A creative design can be achieved with just a single element by leveraging pseudo-elements and dashed borders in CSS.

The shape is constructed in the following manner:

The bottom and left borders (excluding the skewed part) of the element are generated using dashed borders on the parent element.
The top border of the element is crafted utilizing the :after pseudo-element, which is slightly narrower than the parent to align with the skew area. This pseudo-element is positioned above the container through absolute positioning.
The right border is a combination of the parent element's section and the :after pseudo-element.
To create the skewed border segment, a rotated :before pseudo-element is employed. The dimensions of this element are calculated based on trigonometric formulae for determining the hypotenuse of a right-angled triangle.

The result is responsive as confirmed when hovering over 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>

Employing SVG for Visuals:

This artistic representation can also be achieved using Scalable Vector Graphics (SVG). Simply define a path or polygon in the desired shape and set stroke-dasharray on the path for creating a dashed stroke effect.

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

Answer №2

You can experiment with mixing borders, background gradients, and using a pseudo-element to create a unique visual effect on text by creating a 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>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec mauris ut lorem lobortis eleifend id sit amet nibh. Nullam vel bibendum erat, eget efficitur urna. Donec vehicula tortor vitae purus venenatis, in suscipit nunc volutpat. Proin posuere euismod augue quis placerat. In hac habitasse platea dictumst. Vivamus mollis justo non turpis tincidunt, sit amet ullamcorper ante rhoncus. Ut varius pretium dui, at ultricies risus vestibulum a. Quisque feugiat odio ac malesuada pellentesque. Integer tempus imperdiet quam, sed tristique lectus scelerisque et.</p>

Try it out on CodePen

Answer 4

You can experiment with mixing borders, background gradients, and using a pseudo-element to create a unique visual effect on text by creating a 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>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec mauris ut lorem lobortis eleifend id sit amet nibh. Nullam vel bibendum erat, eget efficitur urna. Donec vehicula tortor vitae purus venenatis, in suscipit nunc volutpat. Proin posuere euismod augue quis placerat. In hac habitasse platea dictumst. Vivamus mollis justo non turpis tincidunt, sit amet ullamcorper ante rhoncus. Ut varius pretium dui, at ultricies risus vestibulum a. Quisque feugiat odio ac malesuada pellentesque. Integer tempus imperdiet quam, sed tristique lectus scelerisque et.</p>

Try it out on CodePen

Answer 5

Answer №3

For creating a diagonal border, you can utilize 2 separate divs with individual pseudo elements:

View DEMO

HTML Structure

<div id="grey"></div>
<div class="container">
  <div class="diagonal">
    <h2>Header title</h2>
    <p>Achieving a CSS diagonal corner is definitely possible</p>
  </div>
  <div class="diagonal2">
    <h2>Header title</h2>
    <p>Yes, a CSS diagonal corner with background image is also attainable</p>
  </div>
  <div class="diagonal3">
    <div class="inside">
      <h2>Header title</h2>
      <p>Even a CSS diagonal border can be implemented with an additional div element</p>
    </div>
  </div>
</div>

Relevant CSS Styling

 .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;
}

Answer 6

For creating a diagonal border, you can utilize 2 separate divs with individual pseudo elements:

View DEMO

HTML Structure

<div id="grey"></div>
<div class="container">
  <div class="diagonal">
    <h2>Header title</h2>
    <p>Achieving a CSS diagonal corner is definitely possible</p>
  </div>
  <div class="diagonal2">
    <h2>Header title</h2>
    <p>Yes, a CSS diagonal corner with background image is also attainable</p>
  </div>
  <div class="diagonal3">
    <div class="inside">
      <h2>Header title</h2>
      <p>Even a CSS diagonal border can be implemented with an additional div element</p>
    </div>
  </div>
</div>

Relevant CSS Styling

 .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;
}

Skewed top-left border surrounds the element with a dashed design

Answer №1

Answer №2

Answer №3

Similar questions

JQuery - stylish vertical accordion navigation menu

What is the reason that this particular JQuery code is malfunctioning in the IE browser once integrated into my website?

Is there a way to work around the CORS policy in order to fetch data from URLs?

Enhance the color scheme of your collapsed or expanded Bootstrap NAV for mobile devices

Looking to automate the scraping of Wikipedia info boxes and displaying the data using Python for any Wikipedia page?

Using Javascript to Highlight a Single Row in a Table

The style of CSS remains constant within the JSP file

I’m having trouble getting my home.html page to render in Spring Boot

How can I achieve an endless scrolling text effect within a square on a webpage using CSS?

Using absolute positioning on elements can result in the page zooming out

Mastering the Art of Customizing Styling in Ant Design

Leverage Hubspot and Google Analytics to transfer session source and medium data

HTML5 input placeholder adapts its size and position dynamically as data is being

The size of jVectorMap is displayed too diminutive

Is there a way to change the images displayed in a JavaFXML Button?

What is the best way to extract HTML using selenium.webdriver in Python?

Limit access to a page only to designated users

Ways to restrict users from accessing a file stored on the server?

Is your display:inline-block feature not functioning properly?

When the user clicks, show a designated search result in a separate container