Я хочу создать комический воздушный шар с помощью CSS, то есть диалоговый воздушный шар с текстом и «хвостом» в стиле, который появляется в комиксах. Решение максимально стремится к тому, чтобы «хвост» воздушного шара имел закругленный вид, как показано на изображении:
Я нашел способ, который я отправляю в качестве ответа . Но как бы вы могли улучшить дизайн предлагаемого Cartoon Balloon?
Я даю вам способ сделать это, используя псевдоэлемент
::before
.В html я бы использовал эту структуру:
И в css для контейнера div мы будем использовать его как ссылку для позиционирования балуна в некоторых координатах коробки.
Теперь будет воздушный шар, который мы позиционируем абсолютно и некоторые измерения (какие вы хотите), единственная странность в том, что я использую его
filter
для создания тени, но поскольку это немного отличается от того, как свойство генерируетbox-shadow
его, вы посмотреть почему.После создания шара мы собираемся создать «хвост», я делаю это с помощью
::before
, мы создаем пустой контент и размещаем его относительно шара. Здесь мы должны разместить его в соответствии с его размерами, примерно так:И в зависимости от того, как мы его поместим, вверх или вниз, влево или вправо, мы играем с координатами в
X
иY
, например так:Чтобы добавить этот эффект треугольника, я предпочитаю делать это с помощью transform: skew(xdegrees), например:
Причина, по которой я использую тень, заключается в том, что она покрывает контейнер и то, что выступает из него в тени, независимо от формы, а также, если выступающий элемент не имеет цвета фона или границ, они не учитываются в тень, пример:
Обновлять
Теперь вы можете сделать все более динамичным, используя
custom properties
для автоматического расчета других измерений на основе ширины хвоста.Также я узнал, как вы можете получить кривую, это всего лишь вопрос сочетания свойств box-shadow и border-radius, см.:
Вам действительно не понадобится так много элементов, чтобы сделать вкладку виньетки. Вам будет достаточно использовать псевдоэлемент
:before
в div, на котором у вас есть пуля.В этом случае, чтобы смоделировать треугольник, я использовал поля, так как использование
width: 0
иheight: 0
каждое из полей имеет тенденцию формировать треугольник, чем больше мы его делаем.Наконец, чтобы центрировать текст внутри div как по вертикали, так и по горизонтали, вы можете использовать
flexbox
для его центрирования по вертикали, используя свойствоalign-items: center
, и, поскольку это текст, вы можете центрировать его, используяtext-align: center;
.Примечание. Раньше я
transform: rotate()
придавал ему наклон, который будет соответствовать углу вашего воздушного шара.Пример:
Я оставляю свое решение здесь в качестве ответа, но я хотел бы знать, как вы это сделаете, особенно с дельтой (хвостом) земного шара, поскольку в этом случае мне пришлось использовать несколько Div, чтобы создать его...