How to Create a Slanted Edge for a Div Without Borders?

Create a Slanted Edge to a Div: A Novel Approach

In an attempt to create a slanted div without utilizing borders, we explored an alternative solution that maintains responsiveness and allows for text inclusion without interference from the slant effect.

Using a Skewed Pseudo Element

The key to achieving the slanted edge lies in utilizing a skewed pseudo element. By incorporating this element, we separate the background color from the content of the div. Here's the implementation:

div {
  position: relative;
  display: inline-block;
  padding: 1em 5em 1em 1em;
  overflow: hidden;
  color: #fff;
}

div:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  -webkit-transform-origin: 100% 0;
  -ms-transform-origin: 100% 0;
  transform-origin: 100% 0;
  -webkit-transform: skew(-45deg);
  -ms-transform: skew(-45deg);
  transform: skew(-45deg);
  z-index: -1;
}

Explanation

The pseudo element is positioned absolutely within the div. The transform-origin property is set to the right bottom corner of the element, ensuring that the skew effect originates from that point. The actual skew is applied through the transform property, rotating the element 45 degrees counterclockwise. By giving the pseudo element a negative z-index, we place it behind the content of the div, effectively hiding the overflowing parts.

This approach allows us to add text within the div without compromising the slanted edge effect.

Example

<div>slanted div text</div>
<div>
  slanted div text<br/>
  on several lines<br/>
  an other line
</div>
<div>wider slanted div text with more text inside</div>

The above is the detailed content of How to Create a Slanted Edge for a Div Without Borders?. For more information, please follow other related articles on the PHP Chinese website!