Вращение квадрата с числом в центре CSS

Имея проблемы с вращением квадрата, но сохраняя число внутри него не повернутым.

В идеале хотелось бы так:

.diamond {
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-bottom-color: #EB008B;
  position: relative;
  top: -50px;
  text-align: center;
  font: 40pt Arial, sans-serif;
  color: white;
}

.diamond:after {
  content: '';
  position: absolute;
  left: -50px;
  top: 50px;
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-top-color: #EB008B;
}

<div class = "diamond">1</div>

css

23.11.2022 19:24

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

126

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Используйте диапазон и поверните его обратно в другую сторону.

.diamond {
  width: 100px;
  aspect-ratio: 1;
  font: 40pt Arial, sans-serif;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #EB008B;
  margin: 50px;
  transform: rotate(45deg)
}

.diamond span {
  transform: rotate(-45deg);
  display: inline-block;
}

<div class = "diamond"><span>1</span></div>

23.11.2022 20:40

Ответ принят как подходящий

Будьте проще и используйте clip-path вместо преобразования

.diamond {
  width: 100px;
  aspect-ratio: 1;
  font: 40pt Arial, sans-serif;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #EB008B;
  margin: 50px;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

<div class = "diamond">1</div>

23.11.2022 22:41

Другие вопросы по теме

Отображать div при встроенном стиле none

React Router: таблица стилей не работает с маршрутами с параметрами URL

Амперсанд (&) как переменная внутри SASS @mixin

Прикрепить div к курсору при наведении курсора на родительский div

Пользовательский курсор не перемещается со страницей при прокрутке

Как создать диагональный градиентный фон на CSS?

Как я могу преобразовать входящие данные в JS?

Анимация размытия Tailwindcss

Как сделать панель навигации похожей на домашнюю страницу toast ui

Как изменить интервал TimePicker в пользовательском интерфейсе элемента

Вращение квадрата с числом в центре CSS

Ответы 2

Другие вопросы по теме

Похожие вопросы