Наклон элемента CSS и достижение внутренней закругленной границы сверху

В веб-дизайне может быть непросто воспроизвести сложные графические элементы с точностью и оперативностью с помощью CSS. Одной из таких задач является создание перекошенного элемента с внутренней закругленной верхней границей.

Определение структуры HTML

Сначала давайте определим структуру HTML:

Реализация CSS

Чтобы наклонить элемент и добавить внутреннюю закругленную верхнюю часть границы, мы будем использовать следующий CSS:

.header {
    border-top: 20px solid blue;
    height:100px;
    position: relative;
    overflow: hidden;
}
.header:before,
.header:after {
    content: "";
    vertical-align:top;
    display: inline-block;
    transform-origin: top right;
    transform: skew(-40deg);
}

.header:before {
    height: 100%;
    width: 50%;
    border-radius: 0 0 20px 0;
    background: blue;
}

.header:after {
    height: 20px;
    width: 20px;
    margin-left:-1px;
    background: radial-gradient(circle at bottom right, transparent 68%, blue 73%);
}

Этот CSS создает наклонный элемент, который служит основой для внутренней закругленной верхней части границы. Псевдоэлемент :before заполняет синюю область с закругленным углом, а псевдоэлемент :after добавляет эффект радиального градиента для создания внутренней границы.

Сочетание наклона и внутренней границы

Объединив перекошенный элемент и внутреннюю границу, мы достигаем желаемого эффекта:

.header {
    border-top: 20px solid blue;
    height:100px;
    position: relative;
    overflow: hidden;
}
.header:before {
    content: "";
    vertical-align:top;
    display: inline-block;
    transform-origin: top right;
    transform: skew(-40deg);
    height: 100%;
    width: 50%;
    border-radius: 0 0 20px 0;
    background: blue;
}
.header:after {
    content: "";
    vertical-align:top;
    display: inline-block;
    transform-origin: top right;
    transform: skew(-40deg);
    height: 20px;
    width: 20px;
    margin-left:-1px;
    background: radial-gradient(circle at bottom right, transparent 68%, blue 73%);
}

Этот метод позволяет нам создать адаптивный элемент как с перекошенной формой, так и с внутренней закругленной верхней границей без необходимости использования нескольких элементов. Этот подход обеспечивает большую гибкость и простоту реализации.