Creating a Slanted Corner on a CSS Box

Achieving a slanted corner on a CSS box can be accomplished using various methods. One approach is described below:

Method Using Borders

This technique relies on creating a transparent border along the left side of a container and a slanted border along the bottom. The following code demonstrates how to implement this:

Hello World

.cornered {
  width: 160px;
  height: 0px;
  border-bottom: 40px solid red;
  border-right: 40px solid white;
}
.main {
  width: 200px;
  height: 200px;
  background-color: red;
}

This will produce a box with a slanted top-left corner at a 45-degree angle.

Alternative Method Using Transparency

To allow for text within the slanted portion, an additional transparent border can be used. The modified code below illustrates this approach:

  
It's possible to put text up here too
    but if you want it to follow the slant you have to stack
    several of these.
  
Hello hello hello hello
hello hello hello hello hello

.outer {
    background-color: #ccffff;
    padding: 10px;
    font-size: x-small;
}
.cornered {
    width: 176px;
    height: 0px;
    border-bottom: 40px solid red;
    border-left: 40px solid transparent;
}
.main {
    width: 200px;
    height: 200px;
    background-color: red;
    padding: 0 8px;
}

This method creates a slanted border that can display text along its length.