Как сделать фаску на div блоке?

Question

[Im p3l]

Как сделать фаску на div блоке, с сохранением border и фона

Answer 1

[Ankhena]

В связи с тем, что автор нашел скругления в своем макете, вариант с SVG:


Например, так
Для скруглений на CSS еще пошаманить с https://jsfiddle.net/xt1chyvn/
Либо псевдоэлементом с градиентом или бордером, если фон цветом (который голубой у вас), а не картинкой.

Comments

[Im p3l]

@Ankhena
Только сейчас заметил. У меня border-radius: 10px; еще стоит и фаска только в одном месте как на картинке.
фон картинкой. а в вопросе схематичное представление того, как у меня выглядит.

[Ankhena]

Lo Ran,

У меня border-radius: 10px;

а я вот до сих пор этого не замечаю на скрине в вопросе. Может обновите его нормально?

и фаска только в одном месте

ну уж одну из моих 4х я думаю вы сами сделаете

Да и на радиальный градиент тоже не сложно заменить.

[Im p3l]

Ankhena обновил

[Ankhena]

Lo Ran, для размышления: https://jsfiddle.net/xt1chyvn/
Таких 3 сектора нужно наложить поверх предыдущего решения (в линейных градиентах убрать границу, оставить только переход из прозрачного в цвет фигуры)
Это если решать на чистом css.

Простая альтернатива - нарисовать SVG.

Без скруглений я бы делала на css, со скруглениями, вероятно, все таки SVG.

Answer 2

[Антон]

Comments

[Ankhena]

Отредактируйте, чтобы контент вставлялся

[Антон]

Ankhena, до сего момента, я не знал, как это делается =\

Answer 3

[forspamonly2]

Comments

[Ankhena]

Отредактируйте, чтобы контент вставлялся

[forspamonly2]

только после вас, мадам. как только вы отредактируете для этого свой svg - тегните меня, я сразу же ;)