我怎样才能在react-native中做出这样的形状?
在CSS中,解决方案之一是使用-webkit-mask-image,但我不知道如何在react-native中做到这一点。
倒边界半径 https://i.stack.imgur.com/YjP42.png
它实际上是关于CSS,而不是react-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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)