如何制作倒置的边界半径（本机反应）？

Question

我该如何在本机反应中形成这样的形状？

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

Inverted border radius

Answer 1

这实际上是关于CSS的，不是实际的。 ：）。

以下是我的技巧，您可以调整精确值。

.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>