Patrick Patrick - 29 days ago 10
React JSX Question

CSS Triangles in React Native


I'm working on an app that uses triangles that overlay other containers/divs. Had that solved with CSS before:

.triangle:after {
content: "";
display: block;
position: absolute;
top: 15px;
left: -15px;
width: 0;
border-width: 0px 0px 15px 15px;
border-style: solid;

but that doesn't work in React any more. What's the best solution to go here?

ide ide

The best way to do this is to create an <Image> component and absolutely position it, similar to how you would a pure CSS triangle. If the triangle has a flat color, as opposed to a gradient or other pattern, you can set its color using the tintColor style property.


  style={{tintColor: '#008080'}}