function triangle(_ref) {
    var pointingDirection = _ref.pointingDirection,
      height = _ref.height,
      width = _ref.width,
      foregroundColor = _ref.foregroundColor,
      _ref$backgroundColor = _ref.backgroundColor,
      backgroundColor = _ref$backgroundColor === void 0 ? 'transparent' : _ref$backgroundColor;
    var widthAndUnit = getValueAndUnit(width);
    var heightAndUnit = getValueAndUnit(height);
    if (isNaN(heightAndUnit[0]) || isNaN(widthAndUnit[0])) {
      throw new PolishedError(60);
    }
    return _extends__default["default"]({
      width: '0',
      height: '0',
      borderColor: backgroundColor
    }, getBorderColor(pointingDirection, foregroundColor), {
      borderStyle: 'solid',
      borderWidth: getBorderWidth(pointingDirection, heightAndUnit, widthAndUnit)
    });
  }
CSS to represent triangle with any pointing direction with an optional background color.

@example
// Styles as object usage

const styles = {
  ...triangle({ pointingDirection: 'right', width: '100px', height: '100px', foregroundColor: 'red' })
}


// styled-components usage
const div = styled.div`
  ${triangle({ pointingDirection: 'right', width: '100px', height: '100px', foregroundColor: 'red' })}


// CSS as JS Output

div: {
 'borderColor': 'transparent transparent transparent red',
 'borderStyle': 'solid',
 'borderWidth': '50px 0 50px 100px',
 'height': '0',
 'width': '0',
}