Сложные фигуры в css3

Сложные фигуры в css3 - Visavi.net https://visavi.net/ RSS - Visavi.net https://visavi.net/assets/img/images/logo_small.png RSS - Visavi.net https://visavi.net/ [email protected] (admin) [email protected] (admin) Fri, 03 May 2024 16:32:25 +0300 Ещё наверное можно было бы вставку параллелограмма сделать, так угол более похож,<br> но у крайней стороны никак наверное угол 90 градусов не сделать.<br> <br> <div class="media-file"><a href="https://joxi.ru/zANzgbLUlq9aZA.png" data-fancybox="gallery"><img src="https://joxi.ru/zANzgbLUlq9aZA.png" class="img-fluid" alt="image"></a></div> <pre class="prettyprint">.parallelogram { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; float: right; width: 150px; height: 100px; border: none; -webkit-border-radius: 27px 0 0; border-radius: 27px 0 0; font: normal 100%/normal Arial, Helvetica, sans-serif; color: rgba(0,0,0,1); -o-text-overflow: clip; text-overflow: clip; background: #1abc9c; -webkit-transform: translateY(15px) skewX(-35deg); transform: translateY(15px) skewX(-35deg); }</pre> https://visavi.net/topics/43876/699534 Сложные фигуры в css3 GodZiLLa Mon, 05 Feb 2018 14:40:20 +0300 Сообщения https://visavi.net/topics/43876/699534 От картинок отказался по причине того, чтоб при изменении размера экрана стиль трансформировался, там всё почти в процентах, а с картинкой этого сложно добиться,<br> придётся лепить кучу картинок под разные разрешения.<br> А вставки из просто стилей, как здесь сделал, слева и справа, всё равно нужный изгиб не получается.<br> Например код левой вставки:<br> <pre class="prettyprint"> .hline1 { display: inline; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; float: left; width: 3%; height: 34px; position: relative; margin: 14px 0 0; border: none; -webkit-border-radius: 0 48px 0 0 / 0 47px 0 0; border-radius: 0 48px 0 0 / 0 47px 0 0; background: rgb(255,255,255); } </pre> Как то с радиусами нужно решить. Вроде как можно отрицательные значения им задавать ?<br> Простым подбором на века засесть можно, а визуально в сервисах такого не наблюдал, чтоб можно было сделать. https://visavi.net/topics/43876/699533 Сложные фигуры в css3 GodZiLLa Mon, 05 Feb 2018 14:21:59 +0300 Сообщения https://visavi.net/topics/43876/699533 <strong>®_GodZiIIa_€</strong>, мне эта мысля первой в голову пришла.. больше вариантов не вижу https://visavi.net/topics/43876/699530 Сложные фигуры в css3 spamVisavi Sun, 04 Feb 2018 18:01:40 +0300 Сообщения https://visavi.net/topics/43876/699530 Да я об этом тоже думал, пока не пробовал делать https://visavi.net/topics/43876/699528 Сложные фигуры в css3 GodZiLLa Sun, 04 Feb 2018 06:00:14 +0300 Сообщения https://visavi.net/topics/43876/699528 как не извращайся, картинка в данном случае уместнее.<br> та как ты делаешь у тебя не получится.<br> лень расписывать, по краям белые блоки с радиусом угла имитирующие выемки https://visavi.net/topics/43876/699526 Сложные фигуры в css3 ramzes Sat, 03 Feb 2018 21:28:41 +0300 Сообщения https://visavi.net/topics/43876/699526 <strong>ramzes</strong>, смотря как извращаться )<br> Некоторые извраты полегче графики будут, несмотря на громоздкий код.<br> Мне бы хотелось достичь желаемого эффекта, но пока что не нашёл как.<br> Нужно изогнуть линии, как на первом скриншоте. https://visavi.net/topics/43876/699525 Сложные фигуры в css3 GodZiLLa Sat, 03 Feb 2018 19:46:47 +0300 Сообщения https://visavi.net/topics/43876/699525 извраты на css как мне помнится очень прилично жрут проц, лучше не злоупотреблять https://visavi.net/topics/43876/699522 Сложные фигуры в css3 ramzes Sat, 03 Feb 2018 16:39:27 +0300 Сообщения https://visavi.net/topics/43876/699522 Дизайнеры есть ? третий вариант и так же не то получается https://visavi.net/topics/43876/699486 Сложные фигуры в css3 GodZiLLa Wed, 31 Jan 2018 10:27:18 +0300 Сообщения https://visavi.net/topics/43876/699486 Пробовал просто трапецию приделывать, но углы у неё не смог нормально закруглить. https://visavi.net/topics/43876/699457 Сложные фигуры в css3 GodZiLLa Sat, 27 Jan 2018 18:03:48 +0300 Сообщения https://visavi.net/topics/43876/699457 Собрал некую конструкцию, что то близкое, но с бордер-радиус не выходит правильно изогнуть,<br> как то не очень сильно погружён в тонкости этого свойства, чтоб по наитию сделать.<br> Может кто сможет дать более близкие значения радиусов, чтоб изогнуть углы ближе к первому скриншоту.<br> Код напишу чуть далее, а сейчас скрин того, что получилось<br> <br> <em><span style="font-size:x-small">Добавлено через 01:37 сек.</span></em><br> Использовал такую конструкцию :<br> <br> <strong>HTML</strong><br> <pre class="prettyprint"> <div class="header"> <div class="hline1"></div> <div class="hline2"></div> <div class="hline3"></div> </div> </pre> <br> <strong>CSS</strong><br> <pre class="prettyprint"> .hline1 { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; height: 10px; border: none; -webkit-border-radius: 4px; border-radius: 4px; color: black; -o-text-overflow: ellipsis; text-overflow: ellipsis; background: rgba(52, 152, 219, 0.5); } .hline2 { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; width: 90%; height: 17px; position: absolute; right: 5%; left: 5%; margin: 0 auto; border: none; -webkit-border-radius: 0 0 34px 34px / 0 0 31px 31px; border-radius: 0 0 34px 34px / 0 0 31px 31px; font: normal 16px/1 "Times New Roman", Times, serif; color: black; -o-text-overflow: ellipsis; text-overflow: ellipsis; background: rgba(52, 152, 219, 0.5); background-position: 50% 50%; -webkit-background-origin: padding-box; background-origin: padding-box; -webkit-background-clip: border-box; background-clip: border-box; -webkit-background-size: auto auto; background-size: auto auto; } .hline3 { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; width: 88%; height: 50px; position: absolute; right: 6%; left: 6%; margin: 17px auto 0; border: none; -webkit-border-radius: 0 0 66px 66px / 0 0 75px 75px; border-radius: 0 0 66px 66px / 0 0 75px 75px; font: normal 16px/1 "Times New Roman", Times, serif; color: black; -o-text-overflow: ellipsis; text-overflow: ellipsis; background: rgba(52, 152, 219, 0.5); } </pre> https://visavi.net/topics/43876/699424 Сложные фигуры в css3 GodZiLLa Fri, 26 Jan 2018 16:57:41 +0300 Сообщения https://visavi.net/topics/43876/699424 <strong>DimmoS</strong>, примерно так и думаю, возможно из нескольких дивов, собранных в один элемент,<br> но вот только как именно, пока не могу понять, с изгибами и закруглениями такой формы пока не могу разобраться.<br> <br> <br> <strong>.::lugaro::.</strong>, сейчас попробую эти видео вставить и посмотреть.<br> <div style="text-align:center;"><br> <div class="media-file ratio ratio-16x9"><iframe src="//www.youtube.com/embed/oOWYN_-OPqA" allowfullscreen></iframe></div> <br> <div class="media-file ratio ratio-16x9"><iframe src="//www.youtube.com/embed/fmSIHr3WKxk" allowfullscreen></iframe></div> </div> ЗЫ.<br> Вантуз так и не реализовал нормальную вставку с ютуба, как уже везде сделано )<br> <br> <em><span style="font-size:x-small">Добавлено через 09:07 сек.</span></em><br> <strong>.::lugaro::.</strong>, видео конечно интересное и даже полезное, но по моей теме, к сожалению, ничего ) https://visavi.net/topics/43876/699410 Сложные фигуры в css3 GodZiLLa Thu, 25 Jan 2018 15:39:25 +0300 Сообщения https://visavi.net/topics/43876/699410 Смурф на чистом CSS<br> <a href="https://youtu.be/oOWYN_-OPqA" target="_blank" rel="nofollow">https://youtu.be/oOWYN_-OPqA</a><br> CSS 3D Трансформации. Пример с 3D кубом<br> <a href="https://youtu.be/fmSIHr3WKxk?t=9m33s" target="_blank" rel="nofollow">https://youtu.be/fmSIHr3WKxk?t=9m33s</a> https://visavi.net/topics/43876/699403 Сложные фигуры в css3 Lugaro Thu, 25 Jan 2018 01:33:12 +0300 Сообщения https://visavi.net/topics/43876/699403 <strong>®_GodZiIIa_€</strong>, если только при помощи дополнительных пустых блоков и их псевдоэлементов, больше я думаю никак, технологии пока не дошли https://visavi.net/topics/43876/699401 Сложные фигуры в css3 Dmitry Kokorin Thu, 25 Jan 2018 01:09:50 +0300 Сообщения https://visavi.net/topics/43876/699401 В общем то не очень надеюсь здесь найти ответ, поскольку не уверен в наличии в этом форуме мастеров по css,<br> хотя кто знает, может кто и в курсе.<br> Вопрос в следующем, возможно ли выстроить такую сложную фигуру, как на скриншоте,<br> с использованием только css3, без использования графики ?<br> Вопрос только именно в геометрии фигуры, так как градиент, тиснение и тень сделать не сложно.<br> Вот сама картинка, такую фигурку нужно слепить в css<br> <br> <em><span style="font-size:x-small">Добавлено через 00:53 сек.</span></em><br> Скриншот https://visavi.net/topics/43876/699392 Сложные фигуры в css3 GodZiLLa Wed, 24 Jan 2018 17:03:46 +0300 Сообщения https://visavi.net/topics/43876/699392