如何制作倒置的边界半径(反应本机)? [英] How to make inverted border radius (react native)?

问题描述

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

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>

这篇关于如何制作倒置的边界半径(反应本机)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！