Прямоугольник+треугольник через псевдоэлемент и градиент

[Vitalya T]

Как сверстать такую фигуру?

 

Моя идея: Сделать прямоугольник, добавить через псевдоэлемент треугольник. но как сделать его так, чтобы залить градиентом таким же, как и у прямоугольника?

 

 

 

 

 

Ссылка на псд.

http://rghost.ru/56934778

[Sergik+]

Зачем огород городить ? Вырежьте картинку не мучайтесь.

Одна строка или целая простыня есть ведь разница.

Смотрю последнее время тенденция нездоровая везде сувать

css даже там где он не нужен.

[npofopr]

Лучше svg сделать.

С css тоже можно, обычный прямоугольник, снизу треугольник приложить, только переход градиента скорее всего будет не плавным, хотя и не факт.

[ows.nightwolf]

Лучше svg сделать.

С css тоже можно, обычный прямоугольник, снизу треугольник приложить, только переход градиента скорее всего будет не плавным, хотя и не факт.

CSS'ом вроде не сделать, т.к. треугольник делается с помощью свойства border, а при назначении этому border'у градиента (через свойство border-image: linear-gradient(...) ) назначенный градиент будет иметь приоритет перед цветом transparent у border'ов справа и слева и "эффект треугольника" пропадет.

[svarog96]

...

Смотрю последнее время тенденция нездоровая везде сувать

css даже там где он не нужен.

 

А что в этом плохого?

[Launder]

 

Лучше svg сделать.

С css тоже можно, обычный прямоугольник, снизу треугольник приложить, только переход градиента скорее всего будет не плавным, хотя и не факт.

CSS'ом вроде не сделать, т.к. треугольник делается с помощью свойства border, а при назначении этому border'у градиента (через свойство border-image: linear-gradient(...) ) назначенный градиент будет иметь приоритет перед цветом transparent у border'ов справа и слева и "эффект треугольника" пропадет.

 

 

Можно сделать ромбик, это будет трансформированный(transform) прямоугольник(div). Исходную заготовку наклоняем (skewX или Y). Поворачиваем(rotate). Делаем градиент из одного угла в другой. Например, из левого нижнего в правый верхний(linear-gradient(to right top, ....)). Можно на 50% сделать ромбик прозрачным (transparent 50%, .... 50%), поскольку половинка ромбика - треугольник, который будет повёрнут таким образом, в зависимости от того, что Вы сделали прозрачным.

Ну и Ваша фигура получится прямоугольник с границей + треугольник (половинка ромбика).

У меня ощущение что градиент в Вашей заготовке  не линейный, а радиальный. В принципе, их оба можно использовать одновременно, но для радиального нужно тогда у обоих фигур точку из которой он исходит сделать одну, возможно, придётся повозиться с позиционированием.

Ну или не делать верхнюю часть ромбика прозрачной, а сделать скажем фон для прямоугольника и ромбика одинаковым (жёлтым), а для ромбика сделать ещё и оранжево-персиковый радиальный градиент. Как это будет выглядеть - вопрос, но можно поэксперементировать по всякому! И что-нибудь, да получится

Интересно что углы немного закруглены и граница сделана, как мне кажется с небольшой прозрачной областью, между фоном и границей. Видимо, нужно для фона ставить content-box и делать небольшой отступ (padding). Можно, наверное, попытаться решить через border-image.

PS: Учтите что если Вам придётся двигать ромбик относительно прямоугольника, то придётся двигать обе координаты translateY(..) translateX(..), поскольку из-за трансформации фигуры, сдвигается и координатная сетка, в которой лежит фигура.

 

Ну и тема была, уже похожая: http://htmlforum.ru/index.php?showtopic=49661&hl=

Смотрю последнее время тенденция нездоровая везде сувать

css даже там где он не нужен.

 

Ну такие задачи решаются, как мне кажется, больше в учебных целях...