Parallelogram

Parallelogram.jsx

import React from 'react';
import styled, { css } from 'styled-components';

const Component = styled.div`${({
    width,
    height,
    before,
    beforeBorderMask,
    beforeBorderColor,
    beforeBackgroundColor,
    after,
    afterBorderMask,
    afterBorderColor,
    afterBackgroundColor
}) => css`
    display: inline-block;
    position: relative;
    height: ${height}px;
    line-height: ${height}px;
    margin: 0 ${after ? width : 0}px 0 ${before ? width : 0}px;
    color: inherit;
    background: inherit;
    width: calc(100% - ${after ? width : 0}px - ${before ? width : 0}px);

    &:before {
        content: '';
        display: block;
        width: 0;
        height: 0;
        position: absolute;
        border-style: solid;
        border-width: ${height / 2}px ${before ? (width / 2) : 0}px;
        top: 0;
        left: ${before ? -width : 0}px;
        border-color:
            ${beforeBorderMask[0] ? beforeBorderColor : 'transparent'}
            ${beforeBorderMask[1] ? beforeBorderColor : 'transparent'}
            ${beforeBorderMask[2] ? beforeBorderColor : 'transparent'}
            ${beforeBorderMask[3] ? beforeBorderColor : 'transparent'};
        background-color: ${beforeBackgroundColor};
    }

    &:after {
        content: '';
        display: block;
        width: 0;
        height: 0;
        position: absolute;
        border-style: solid;
        border-width: ${height / 2}px ${after ? (width / 2) : 0}px;
        top: 0;
        right: ${after ? -width : 0}px;
        border-color:
            ${afterBorderMask[0] ? afterBorderColor : 'transparent'}
            ${afterBorderMask[1] ? afterBorderColor : 'transparent'}
            ${afterBorderMask[2] ? afterBorderColor : 'transparent'}
            ${afterBorderMask[3] ? afterBorderColor : 'transparent'};
        background-color: ${afterBackgroundColor};
    }
`}`;

class Parallelogram extends React.Component {
    render() {
        const {
            before,
            after,
            height = 0,
            width = 0,
            style,
            className,
            children,
        } = this.props;
        const {
            borderMask: beforeBorderMask = 'transparent',
            borderColor: beforeBorderColor = 'transparent',
            backgroundColor: beforeBackgroundColor = 'transparent',
        } = { ...before };

        const {
            borderMask: afterBorderMask = 'transparent',
            borderColor: afterBorderColor = 'transparent',
            backgroundColor: afterBackgroundColor = 'transparent',
        } = { ...after };

        return (
            <Component
                width={width}
                height={height}
                before={!!before}
                beforeBorderMask={beforeBorderMask}
                beforeBorderColor={beforeBorderColor}
                beforeBackgroundColor={beforeBackgroundColor}
                after={!!after}
                afterBorderMask={afterBorderMask}
                afterBorderColor={afterBorderColor}
                afterBackgroundColor={afterBackgroundColor}
                style={style}
                className={className}
            >
                {children}
            </Component>
        );
    }
}

export default Parallelogram;

<Parallelogram
    before={{
        borderMask: [1, 1, 0, 0],
        borderColor: '#C80A0A',
        backgroundColor: '#A50000',
    }}
    after={{
        borderMask: [0, 0, 1, 1],
        borderColor: '#C80A0A',
        backgroundColor: 'transparent',
    }}
    style={{
        backgroundColor: '#C80A0A',
        color: '#fff',
    }}
    width={64}
    height={64}
>
  {/* YOUR TEXT HERE */}
</Parallelogram>