this is code by css at id works fine:
border-bottom: 100px solid #0000ff80;
border-right: 50px solid transparent;
height: 0;
width: 100px;
<div id="trapezoid"></div>
but my code on react-native doesn't work:
<View style={{width:100,height:0,borderBottomWidth:100,borderBottomColor:'#000',borderLeftWidth:0,borderRightWidth:50,borderRightColor:'#000'}}>
</View>
try this out
var Trapezoid = React.createClass({
render: function() {
return (
<View style={styles.trapezoid} />
)
}
})
trapezoid: {
width: 200,
height: 0,
borderBottomWidth: 100,
borderBottomColor: 'red',
borderLeftWidth: 50,
borderLeftColor: 'transparent',
borderRightWidth: 50,
borderRightColor: 'transparent',
borderStyle: 'solid'
}
for more such shapes checkout https://codedaily.io/tutorials/22/The-Shapes-of-React-Native
You can achieve it by a rectangle and a triangle in a row.
<View style={{ flexDirection: 'row' }}>
<View style={styles.rectangle} />
<View style={[styles.triangle, styles.triangleCornerBottomLeft]} />
</View>
const styles = StyleSheet.create({
rectangle: { width: 100, height: 100, backgroundColor: 'red' },
triangle: {
width: 0,
height: 0,
backgroundColor: 'transparent',
borderStyle: 'solid',
borderRightWidth: 100,
borderTopWidth: 100,
borderRightColor: 'transparent',
borderTopColor: 'red'
},
triangleCornerBottomLeft: {
transform: [
{rotate: '270deg'}
]
},
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.