Создание наклонного угла в блоке CSS

Создать наклонный угол в блоке CSS можно различными методами. Один из подходов описан ниже:

Метод с использованием границ

Этот метод основан на создании прозрачной границы вдоль левой стороны контейнера и наклонной границы внизу. . Следующий код демонстрирует, как это реализовать:

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 градусов.

Альтернативный метод с использованием прозрачности

Чтобы Если разрешить размещение текста внутри наклонной части, можно использовать дополнительную прозрачную рамку. Модифицированный код ниже иллюстрирует этот подход:

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

Этот метод создает наклонную рамку, вдоль которой может отображаться текст.