I'm working on building a React Native app based on designs from our designer. The design has several places where there are buttons or shapes with one diagonal line (see the following example). I've tried using SkewX
but that just seems to rotate the whole shape (and doesn't seem to work on Android anyway). How can I draw a rectangle/button with a diagonal border on one side?
I've been using the styled-components package to style my React Native components and the easiest solution I've found is to set the border radius to a size in px larger than half of the width that the circle will ever have. It'll then default to the equivalent of a 50% border-radius for any size smaller than that.
You can apply css to View
class and create the desired output,
Heres a small demo code edited version
import React, { Component } from 'react';
import { View, StyleSheet } from 'react-native';
import { Constants } from 'expo';
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<View style={styles.triangleCorner}></View>
<View style={styles.triangleCornerLayer}></View>
<View style={styles.triangleCorner1}></View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
},triangleCorner: {
position: 'absolute',
top:105,
left:0,
width: 300,
height: 100,
backgroundColor: 'transparent',
borderStyle: 'solid',
borderRightWidth: 50,
borderTopWidth: 80,
borderRightColor: 'transparent',
borderTopColor: 'gray'
},triangleCorner1: {
position: 'absolute',
top:100,
left:0,
width: 130,
backgroundColor: 'transparent',
borderStyle: 'solid',
borderRightWidth: 50,
borderTopWidth: 90,
borderRightColor: 'transparent',
borderTopColor: 'green'
},triangleCornerLayer: {
position: 'absolute',
top:107,
left:0,
width:297,
height: 100,
backgroundColor: 'transparent',
borderStyle: 'solid',
borderRightWidth: 47,
borderTopWidth: 75,
borderRightColor: 'transparent',
borderTopColor: 'white'
}
});
Result:
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With