css背景斜角

编写一个斜角的背景界面，利用的是border实现，让border-top和border-right有不同的color，使其看起来就是斜角的效果


一个显示斜角效果的组件bevelEdge
import PropTypes from 'prop-types';
import classNames from 'classnames/bind';
import styles from './style.scss';


const cx = classNames.bind(styles);


const BevelEdge = (props) => {
  const leftStyle = {
    color: props.leftColor
  };
  const rightStyle = `100vw solid ${props.rightColor}`;
  const borderTopStyle = { borderTopColor: leftStyle.color};    //border-top的颜色
  // reverse判断是否需要翻转效果，左斜线/右斜线
  const styleProps = props.reverse ? Object.assign({}, borderTopStyle, {borderRight: rightStyle}) : Object.assign({}, borderTopStyle, {borderLeft: rightStyle});
  return (
    <div className={cx('basic', props.className)} 
      style={styleProps}
    />
  );
};


BevelEdge.propTypes = {
  className: PropTypes.string,
  height: PropTypes.string,
  leftColor: PropTypes.string,
  rightColor: PropTypes.string,
  reverse: PropTypes.bool
};


BevelEdge.defaultProps = {
  className: '',
  height: '',
  leftColor: '',
  rightColor: '',
  reverse: false,
};


export default BevelEdge;


样式basic：
.basic {
  border-top-style: solid;
  width: 0;
  height: 0;
}


当应用这个组件的时候：
import BevelEdge from 'Components/BevelEdge';
const whiteAndGrayBevelEdge = <BevelEdge className={styles.bevelEdge} leftColor="#fff" rightColor="#fafafa" reverse={true} />;


样式bevel-edge确定这个斜线的坡度
  .bevel-edge {
    border-top-width: 135px;
  }


 效果：




如果有其他特别的移动和pc端需要不同的效果，可以加多一个样式名称：
const transparentAndWhiteBevelEdge = <BevelEdge className={cx('bevelEdge', 'transparentAndWhiteBevelEdge')} leftColor="transparent" rightColor="#fff" reverse={true} />;


样式transparentAndWhiteBevelEdge在移动端的效果：
.transparent-and-white-bevel-edge {
  position: absolute;
  top: 161px;
}


而在pc端的效果：
  .transparent-and-white-bevel-edge {
    top: 427px;
  }