Если кратко рассказать о фоне, то необходимо реализовать кнопку развертывания и свертывания.
Тогда первым методом, который я придумал, было borderрисовать самому.
1. borderГраница
width: 150px;
border-top: 50px solid red; // 梯形的高
border-right: 50px solid transparent; // 往右延伸
border-bottom: 50px solid transparent; // 整个div的高
border-left: 50px solid transparent; // 往左延伸
Эффект показан на рисунке: (с фоновым изображением, красная часть)
Приведенный выше копирайтинг, описание может быть не таким точным, изменить атрибуты, это можно понять.
width: 150px;
border-top: 50px solid red;
border-right: 80px solid transparent; // 50==>80
border-bottom: 0px solid transparent; // 50==>0
border-left: 80px solid transparent; // 50==>80
Эффект показан на рисунке:
Сравнив два изображения, можно обнаружить, что divширина и высота изображения изменились.Наконец, удалите фоновое изображение и повторно настройте некоторые атрибуты.
width: 150px;
border-top: 50px solid red;
border-right: 50px solid transparent;
border-bottom: 0px solid transparent;
border-left: 50px solid transparent;
Эффект как показано на рисунке:
ок, трапеция нарисована, потом опять проблема, кнопка развернуть и закрыть по требованию имеет фоновое изображение, как это можно настроить? borderЯ могу установить только цвет фона, как я могу поставить на него свою картинку?
Поскольку этот метод не работает, давайте попробуем другую реализацию.
2,clip-path
Пояснение к MDN: атрибут clip-path использует отсечение для создания отображаемой области элемента. Часть внутри области отображается, а часть вне области скрыта.
Как использовать:polygon(1, 2, 3, 4)
Четыре координаты соответствуют: верхнему левому углу, нижнему левому углу, нижнему правому углу, верхнему правому углу.
где верхний левый угол находится в начале координат
width: 150px;
height: 20px;
clip-path:polygon(0 0, 20px 100%,calc(100% - 20px) 100%,100% 0);
// 等同于 clip-path:polygon(0 0, 20px 20px,130px 20px,150px 0);
Эффект показан на рисунке:
этот метод позволяет настроить фон, что кажется хорошим решением.
Однако требования совместимости браузера для этого атрибута относительно borderвысоки, Chrome версии 55 и выше может только поддерживать его, но версия ядра клиентской части нашего проекта все еще имеет более низкую версию, поэтому этот метод не работает.
Подумав об этом, лучше позволить пользовательскому интерфейсу обрезать картинку, но этот метод может быть использован позже, поэтому пока оставьте отметку.