Skip to content

Instantly share code, notes, and snippets.

@cheton

cheton/Parallelogram.jsx

Last active November 21, 2018 13:23
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save cheton/4a99ce92d1060f57e94a6e1373a38fb4 to your computer and use it in GitHub Desktop.
Save cheton/4a99ce92d1060f57e94a6e1373a38fb4 to your computer and use it in GitHub Desktop.
Download ZIP
Parallelogram
Raw
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;
@cheton
Copy link
Author

cheton commented Nov 21, 2018 

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment