Как срезать углы блока в react-native?

Question

[m_frost]

Как сверстать как на картинке в прямоугольников срезано по 1 углу и круг в центре прозрачный

Answer 1

[Вадим Кот]

Вот вам пример (даже адаптивный) такой верстки

https://codepen.io/thebabydino/pen/LmxnI

Comments

[m_frost]

спасибо за пример но проблема в том что я работаю с react-native а там верстка немного другая

[Вадим Кот]

m_frost, А при чем тут верстка? Вам стили нужно прописать для своей разметки. По аналогии из примера сделайте так же. В чем проблема?

[m_frost]

Вадим Кот, чувак ты вообще видел что это стилус с какими-то непонятно функциями, незнаю как ты а я там ничего не могу разобрать, если по твоему это так легко давай 1 View с срезанным прозрачным углом.

[Вадим Кот]

m_frost, Там не стилус, а sass (scss) - на codepen можно посмотреть сразу же скомпилированный css.
Если react осилил, то и в css разобраться тоже должен - тем более готовый пример дан.
Вот тебе пример одного такого компонента

https://codepen.io/web-tech/pen/vqdpvP
Там то все примитивно - надеюсь теперь уже поймешь.

[m_frost]

Вадим Кот, вот чувак смотри в react-native нет псевдокласов как я по твоему должен туда after добавить, + там другая роботя с тенями + borderRadius 50% можна задать только блоку с height. Я понимаю что ты хочешь помочь, но для чего спорить если совсем не разбираешься в теме ???

[Вадим Кот]

m_frost,

нет псевдокласов как я по твоему должен туда after добавить

И что? замени псеводкласс на элемент (банальный div или span)

borderRadius 50% можна задать только блоку с height.

смотри выше

там другая роботя с тенями

shadow в любом случае есть - shadowColor, shadowOffset, shadowRadius дают аналогичный эффект

Здесь дело не в react-native, а в способности аналитически мыслить. Любой html + css можно завернуть в компонент. А тем более за два дня.

[m_frost]

Вадим Кот, чувак на андроид вся робота с тенями ето elevation, там нет цвета тени.

[Вадим Кот]

m_frost, В любом случае срезанные закругленные углы прозрачные можно сделать только с помощью box-shadow или radial-gradient
https://codepen.io/web-tech/pen/Wqzwrx
Либо фон этот вставить в svg (inline или background-image). Экспортировать эти 4 элемента в svg (или самому отрисовать в векторе) я думаю получится без проблем.

Answer 2

[davidnum95]

Недавно столкнулся с похожей проблемой, у View с прозрачным фоном не работает borderRadius. Соответственно - никак.

Comments

[m_frost]

да у меня проблема еще хуже мне их внутрь срезать надо как на картинке