How to make inverted border radius (react native)?
Multi tool use
How to make inverted border radius (react native)?
How could I do such shape in 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.
Inverted border radius
1 Answer
1
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>Sure, let me know if it works and if not, I'll gladly help you with that.
– Andrzej Ziółek
Jul 2 at 16:50
@DastanKumar: have my solution helped you? Is it working OK? If so, please mark my answer as accepted.
– Andrzej Ziółek
Jul 3 at 12:30
Your solution works! Thanks!
– Dastan Kumar
Jul 3 at 17:41
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
Thank you, let me try your solution in my project.
– Dastan Kumar
Jul 2 at 16:47