Как сделать инвертированный радиус границы (реагировать на родную)

Question

Как я мог сделать такую ​​форму в реактивной?

В CSS одним из решений является использование -webkit-mask-image, но я не знаю, как это сделать в реагирующем.

Радиус перевернутой границы

Answer 1

Это на самом деле о CSS, а не ract-native. :.)

Ниже мой трюк, вы можете настроить точные значения.

.square-wrapper {
  position: relative;
  height: 100px;
  width: 100px;
  overflow: hidden;
}

.square {
  height: 100%;
  width: 100%;
  background: grey;
  border: 2px solid red;
  border-radius: 10px;
  box-sizing: border-box;
}

.square:after {
  position: absolute;
  display: block;
  content: '';
  right: -50%;
  bottom: -50%;
  height: 100%;
  width: 100%;
  background: white;
  border-top: 2px solid red;
  border-left: 2px solid red;
  border-radius: 50%;
}

<div class="square-wrapper">
  <div class="square"></div>
</div>