如何制作倒置的边界半径(反应本机)?

问题描述：

我该如何在本机中形成这样的形状?

How could I do such shape in react-native?

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

In CSS, one of the solutions is to use -webkit-mask-image, but I don't know how to do it in react-native.

边界半径倒置

答

它实际上是关于CSS的，而不是本机语言. :).

It's actually about CSS, not ract-native. :).

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

Below is my trick, you can adjust precise values.

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

如何制作倒置的边界半径(反应本机)?

相关推荐