Size: a a a

HTML/CSS — русскоговорящее сообщество

2020 August 05

OS

Oleg Shilov in HTML/CSS — русскоговорящее сообщество
Не совсем. Вот есть у тебя лепесток. Сделай внутри него див который абсолютно позиционирован и имеет например width 100% height 90% и стили которые его будут разукрашивать перенеси из лепестка в стили этого нового дива.
источник

OS

Oleg Shilov in HTML/CSS — русскоговорящее сообщество
Тем самым у тебя первый див будет делать поворот, а тот который внутри уже будет иметь визуальное оформление и будет твоим лепестком
источник

DS

Dmytro Svyrydenko in HTML/CSS — русскоговорящее сообщество
Всем привет
У кого-либо есть идея как сделать это используя css, не добавляя при этом extra html?
источник

DS

Dmytro Svyrydenko in HTML/CSS — русскоговорящее сообщество
Я думал сделать что-то типо тенью, но если у кнопки будет прозрачный bg, то тень будет видно на фоне
источник

DS

Dmytro Svyrydenko in HTML/CSS — русскоговорящее сообщество
Сейчас вот думаю сделать через after + before, аля два прямоугольника снизу и справа, с border-radius нужным
Но чет как-то костыльно это)
источник

AP

Anton Permyakov in HTML/CSS — русскоговорящее сообщество
Dmytro Svyrydenko
Сейчас вот думаю сделать через after + before, аля два прямоугольника снизу и справа, с border-radius нужным
Но чет как-то костыльно это)
а почему недостаточно одного прямоугольника, который копирует форму кнопки?
источник

DS

Dmytro Svyrydenko in HTML/CSS — русскоговорящее сообщество
Anton Permyakov
а почему недостаточно одного прямоугольника, который копирует форму кнопки?
Ну, во-первых, after/before нельзя разместить под кнопкой, если html имеет вид
<button> content </button>
А во-вторых, если кнопка будет прозрачной (как здесь), то прямоугольник внизу будет видно
источник

AP

Anton Permyakov in HTML/CSS — русскоговорящее сообщество
Dmytro Svyrydenko
Сейчас вот думаю сделать через after + before, аля два прямоугольника снизу и справа, с border-radius нужным
Но чет как-то костыльно это)
тогда только так
источник

DS

Dmytro Svyrydenko in HTML/CSS — русскоговорящее сообщество
Anton Permyakov
тогда только так
Та вот да
Думал может можно как-то там красиво на тенях, либо еще что-то экзотическое – благо поддержка браузеров позволяет
источник

AP

Anton Permyakov in HTML/CSS — русскоговорящее сообщество
мне кажется, если кнопка должна быть полностью прозрачной, то вариантов особо нет
источник

OS

Oleg Shilov in HTML/CSS — русскоговорящее сообщество
Dmytro Svyrydenko
Ну, во-первых, after/before нельзя разместить под кнопкой, если html имеет вид
<button> content </button>
А во-вторых, если кнопка будет прозрачной (как здесь), то прямоугольник внизу будет видно
Див может быть по идее валидной кнопкой если ему указать role=button
источник

DS

Dmytro Svyrydenko in HTML/CSS — русскоговорящее сообщество
Oleg Shilov
Див может быть по идее валидной кнопкой если ему указать role=button
Нуу, может и да
Только что толку)
Мне важно сохранить структуру <div> content </div>
источник

OS

Oleg Shilov in HTML/CSS — русскоговорящее сообщество
А псевдо элементы с кнопками такое себе. Время тратить не думаю что стоит.
источник

AP

Anton Permyakov in HTML/CSS — русскоговорящее сообщество
с другой стороны, если кнопка будет на светлом фоне, ей нужно будет поменять цвет, тогда почему нельзя указать в кастомном свойстве цвет фона
источник

DS

Dmytro Svyrydenko in HTML/CSS — русскоговорящее сообщество
Oleg Shilov
А псевдо элементы с кнопками такое себе. Время тратить не думаю что стоит.
Ну че, вот я before уже наваял
источник

AP

Anton Permyakov in HTML/CSS — русскоговорящее сообщество
Oleg Shilov
Див может быть по идее валидной кнопкой если ему указать role=button
и ещё тонна свойств и джса
источник

OS

Oleg Shilov in HTML/CSS — русскоговорящее сообщество
Dmytro Svyrydenko
Нуу, может и да
Только что толку)
Мне важно сохранить структуру <div> content </div>
:after со стилями кнопки и смешением
источник

DS

Dmytro Svyrydenko in HTML/CSS — русскоговорящее сообщество
Щас еще after добавлю и пушка будет
источник

DS

Dmytro Svyrydenko in HTML/CSS — русскоговорящее сообщество
Oleg Shilov
:after со стилями кнопки и смешением
У меня будет button со стилем кнопки
И нижние «тени» как after+before
источник

OS

Oleg Shilov in HTML/CSS — русскоговорящее сообщество
Anton Permyakov
мне кажется, если кнопка должна быть полностью прозрачной, то вариантов особо нет
Если прозрачной нижний элемент просветит, так что она должна быть цветом фона
источник