How to Create a Slanted Div with Text Using Only CSS?

Creating a Slanted Edge to a Div

You seek to craft a slanted div that incorporates text without the use of borders. To achieve this, the following CSS code can be employed:

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

body {
  background: url('https://farm3.staticflickr.com/2878/10944255073_973d2cd25c.jpg');
  background-size: cover;
}

Explanation:

• A skewed pseudo element is used to create the slanted background, preventing the text from being affected by transformations.
• The transform origin property enables the pseudo element to be skewed from the right bottom corner.
• Overflow:hidden; conceals the overflowing parts of the pseudo element.
• Text is stacked behind the background using negative z-index.

Usage 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 Div with Text Using Only CSS?. For more information, please follow other related articles on the PHP Chinese website!