react-native - 如何制作倒置的边框半径( react native )？

Question

我怎么能在 react-native 中做这样的形状？

在 CSS 中，解决方案之一是使用 -webkit-mask-image，但我不知道如何在 react-native 中使用它。

Inverted border radius

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>