CSS ボックスに斜めの角を作成する

CSS ボックスに斜めの角を作成するには、さまざまな方法を使用します。 1 つのアプローチを以下に説明します。

境界線を使用する方法

この手法は、コンテナの左側に沿って透明な境界線を作成し、底部に沿って斜めの境界線を作成することに依存しています。 。次のコードは、これを実装する方法を示しています:

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

これにより、左上隅が 45 度の角度で傾いたボックスが作成されます。

透明性を使用した代替方法

To斜めの部分内にテキストを入れることができる場合は、追加の透明な境界線を使用できます。以下の変更されたコードは、このアプローチを示しています。

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

このメソッドは、長さに沿ってテキストを表示できる斜めの境界線を作成します。