Создать фигуру с помощью css?

Question

[versulterov]

Как css создать фигуру в красной рамке, центр зеленый, сверху белый треугольник, а снизу треугольник #f4f4f4

Comments

[versulterov]

без блоков в центре, нужен фон в таком виде, желательно градиентом, трансформ не подходит, внутри будет содержимое

Answer 1

[AngReload]

Но, лучше не использовать градиенты как вы просите, а сделать SVG.

Comments

[versulterov]

Как варик, попробую

[AngReload]

versulterov,
С помощью SVG
jsfiddle.net/AngReload/7845qro3
Там как фоновое изображение:

<svg width="100" height="100" baseProfile="full" xmlns="http://www.w3.org/2000/svg">
    <polygon points="0,0 100,0 100,12.5" fill='white' />
    <polygon points="0,100 100,100 0,87.5" fill='#f4f4f4' />
</svg>

[Ankhena]

У градиента просто надо ставить не 15% 15%, а подобрать что-то для гладкости, например, 15% и 16%

[AngReload]

Ankhena, в каком браузере нет гладкости? Я проверял в Chrome, FF, Edge — выглядит хорошо.

[Ankhena]

AngReload, возможно, зависит от настроек монитора

[Ankhena]

AngReload, но я-то как раз очень люблю решения с градиентами, svg тоже, но градиенты больше.

[versulterov]

Да вот чутка граница размывается на градиенте

Answer 2

[Stalker_RED]

Answer 3

[Froggyweb]

transform skew
https://developer.mozilla.org/ru/docs/Web/CSS/tran...

Comments

[versulterov]

без трансформа, градиентом

Answer 4

[Владислав Лысков]

так

Comments

[versulterov]

я имел ввиду фоном, через градиент

Answer 5

[Алексей Джо]

jsfiddle.net/610xnkj7

Примерно так, но нужно везде юзать calc и использовать теорему пифагора для расчета

Comments

[versulterov]

Нет, трагсформ повернет все содержимое

Answer 6

[FalseCode]

Для родительского блока transform: rotate(), skew;
И для внутреннего блока противоположный transform