我想在React Native上制作一些倾斜的边框视图

Question

我想使View像这样，但是我不能使倾斜的边框成为T.T。我对CSS不太满意，请您能帮我吗？ 我尝试了这段代码。

import * as React from 'react';
import { StyleSheet, View, ViewStyle } from 'react-native';

export interface CuttedComponentProps {
  cuttedComponentWidth: number;
  cuttedComponentHeight: number;
  style?: ViewStyle | ViewStyle[];
  backgroundColor: string;
  zIndex?: number;
  borderBottom?: boolean;
}

class CuttedComponent extends React.Component<CuttedComponentProps> {
  constructor(props: CuttedComponentProps) {
    super(props);
  }

  public render() {
    const {
      style,
      cuttedComponentWidth,
      cuttedComponentHeight,
      backgroundColor,
      zIndex,
      borderBottom,
      children
    } = this.props;
    return (
      <View style={style}>
        <View
          style={{
            position: 'absolute',
            left: borderBottom ? -StyleSheet.hairlineWidth : 0,
            top: borderBottom ? -StyleSheet.hairlineWidth : 0,
            zIndex: zIndex && zIndex + 0.5,
            width: 0,
            height: 0,
            borderStyle: 'solid',
            borderRightWidth: cuttedComponentHeight,
            borderTopWidth: cuttedComponentWidth,
            borderRightColor: 'transparent',
            borderTopColor: backgroundColor
          }}
        />
        {children}
      </View>
    );
  }
}
export default CuttedComponent;

我尝试了这段代码，但是它（边界）没有显示在成角度的角落。