Датахакер
Как сделать угол css?
Карточка прямоугольная, в правом верхнем углу нужен маленький цветной треугольник, без картинки, скругление не нужно, просто декоративная отметка
Ваш вопрос
Датахакер
Карточка прямоугольная, в правом верхнем углу нужен маленький цветной треугольник, без картинки, скругление не нужно, просто декоративная отметка
v4-pro
| Часть приема | Для чего нужна |
|---|---|
position: relative у карточки | Делает ее обычной точкой отсчета для абсолютно позиционированного декоративного потомка |
content: "" у ::after | Создает псевдоэлемент без текстового содержимого |
position: absolute | Позволяет поставить украшение в угол, не создавая отдельную строку внутри карточки |
top: 0; right: 0 | Привязывает треугольник к верхней правой стороне содержащего блока |
| Нулевые width и height | Оставляют форму границ без внутренней прямоугольной области |
| Прозрачный border-left | Создает невидимую сторону треугольной формы |
| Цветной border-top | Образует видимую часть угловой отметки |
Для примера используйте ширину границ 16px. Это будет маленькое украшение, размер которого удобно менять одним согласованным значением. Если поставить другие границы или сменить прозрачную сторону, направление треугольника изменится.
Не путайте этот прием со скруглением: border-radius меняет форму углов прямоугольной коробки, а здесь создается дополнительная фигура. Картинка для такого простого декора не нужна.
После добавления посмотрите на длинный заголовок карточки. Поскольку треугольник находится вне обычного потока, текст не обязан обтекать его автоматически. При необходимости увеличьте padding в соответствующей области.
Если угол нужен для статуса вроде скидки или новой записи, один цвет недостаточен для передачи смысла. Разместите понятную подпись в обычном содержимом. Если это лишь украшение, пустой псевдоэлемент подходит без отдельной надписи. Не закрывайте им фокусируемые элементы и интерактивные области карточки.
4.20
position: relative.Пока нет премиум-вопросов в подборке
Не нашли то, что искали?
Задайте свой вопрос
Лучший ответ
4o
4o
Как сделать угол css?
Для декоративного треугольника в углу используйте псевдоэлемент с нулевыми размерами и двумя границами. Карточке задайте
position: relative, а ее ::after —content: ""; position: absolute; top: 0; right: 0; width: 0; height: 0; border-left: 16px solid transparent; border-top: 16px solid teal. Одна граница прозрачная, другая цветная, и на их стыке получается треугольник. Размер задается шириной границ, а не width самого псевдоэлемента. Такой угол не занимает места в обычном потоке, поэтому он может перекрыть содержимое у края: оставьте для него достаточный внутренний отступ. Если отметка обозначает важный статус, продублируйте смысл обычным текстом. Пустой декоративный треугольник сам по себе ничего не объясняет.