How can I make a rotated banner the same way as Tidal does here

I have tried making a trapezoid and rotate it by 45 degrees according to / and then place a rotated text on top of it, but it is very difficult to make it align with the borders.

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'
} 

I have also thought about making first one big triangle and then a smaller triangle on top (hiding a part of the big triangle), such that only the banner is visible, and then place a rotated text, but since the image behind is not solid colored, it is not possible to select a background color for the smaller triangle that will hide the bigger triangle.

The easiest must be something like this

<View style={{
  transform: [{ rotate: '-30deg'}],
  marginLeft: 5,
  marginTop: 5,
  backgroundColor: 'lightblue',
  borderTopWidth: 1,
  borderBottomWidth: 1,
  borderColor: '#fff',
  paddingVertical: 1,
  paddingHorizontal: 20,
  marginLeft: -15,
  marginTop: 8
}}>
  <Text style={{
    backgroundColor: 'transparent', color: '#111', fontSize: 10,
    fontWeight: 'bold' }}>EXCLUSIVE</Text>
</View>

but then I have to change the position manually according to the size of the text, and the borders of the rectangle will stick out of the picture.

How can I make a rotated banner the same way as Tidal does here

I have tried making a trapezoid and rotate it by 45 degrees according to http://browniefed./blog/the-shapes-of-react-native/ and then place a rotated text on top of it, but it is very difficult to make it align with the borders.

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'
} 

I have also thought about making first one big triangle and then a smaller triangle on top (hiding a part of the big triangle), such that only the banner is visible, and then place a rotated text, but since the image behind is not solid colored, it is not possible to select a background color for the smaller triangle that will hide the bigger triangle.

The easiest must be something like this

<View style={{
  transform: [{ rotate: '-30deg'}],
  marginLeft: 5,
  marginTop: 5,
  backgroundColor: 'lightblue',
  borderTopWidth: 1,
  borderBottomWidth: 1,
  borderColor: '#fff',
  paddingVertical: 1,
  paddingHorizontal: 20,
  marginLeft: -15,
  marginTop: 8
}}>
  <Text style={{
    backgroundColor: 'transparent', color: '#111', fontSize: 10,
    fontWeight: 'bold' }}>EXCLUSIVE</Text>
</View>

but then I have to change the position manually according to the size of the text, and the borders of the rectangle will stick out of the picture.

• javascript
• reactjs
• react-native

2 Answers 2

You can implement something like this:

.banner{
  position: absolute;
  transform: rotate(45deg);
  top: 15px;
  right: -40px;
  padding: 5px 50px; 
  background-color: red;
}
.view{
  overflow: hidden;
  position: relative;
  width: 250px;
}
img{
  width: 100%;
}

<div class="view">
    <img src="https://upload.wikimedia/wikipedia/mons/thumb/9/99/Unofficial_JavaScript_logo_2.svg/1200px-Unofficial_JavaScript_logo_2.svg.png" alt="js">
    <div class="banner">banner</div>
</div>

I've tried with react-native:

class ImageWithBanner extends Component {
    render() {
        return (
            <View style={styles.container}>
                <View style={styles.view}>
                    <Image
                        style={styles.image}
                        source={{
                            uri:
                                'https://upload.wikimedia/wikipedia/mons/thumb/9/99/Unofficial_JavaScript_logo_2.svg/1200px-Unofficial_JavaScript_logo_2.svg.png'
                        }}
                    />
                    <View style={styles.banner}>
                        <Text>banner</Text>
                    </View>
                </View>
                <Button
                    title="Tap to reload items"
                    onPress={() => this.getData('boobs')}
                />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    view: {
        overflow: 'hidden',
        position: 'relative',
        width: 250,
        height: 200
    },
    image: {
        width: '100%',
        height: '100%'
    },
    banner: {
        position: 'absolute',
        backgroundColor: 'red',
        transform: [{ rotate: '45deg' }],
        top: 15,
        right: -40,
        paddingTop: 5,
        paddingBottom: 5,
        paddingLeft: 50,
        paddingRight: 50
    }
});

This seems to work, with an absolute position, transformed within the banner class, rather than transforming the view or image:

var styles = StyleSheet.create({
view: {
    overflow: 'hidden',
    position: 'relative',
    width: 250,
    height: 200
},
image: {
    width: '100%',
    height: '100%'
},
banner: {
    position: 'absolute',
    backgroundColor: 'red',
    transform: [{ rotate: '45deg' }],
    top: 15,
    right: -40,
    paddingTop: 5,
    paddingBottom: 5,
    paddingLeft: 50,
    paddingRight: 50
}
});

OR, depending on how you want to embed your classes in your HTML sheet, and how you proportion sizes,

.banner{
  position: absolute;
  transform: rotate(45deg);
  top: 15px;
  right: -40px;
  padding: 5px 50px; 
  background-color: red;
}
.view{
  overflow: hidden;
  position: relative;
  width: 250px;
}
img{
  width: 100%;
}