Patrick Patrick - 2 months ago 34
React JSX Question

CSS Triangles in React Native

triangle

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
Answer

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.

Example:

<Image
  source={require('image!triangle')}
  style={{tintColor: '#008080'}}
/>
Comments