PointerBox

<PointerBox m={4} p={2} minHeight={100} bg="bg.success" borderColor="border.success">
  PointerBox
</PointerBox>

function PointerBoxDemo(props) {
  const [pos, setPos] = React.useState('top')

  return (
    <Box>
      <Heading as="h3" fontSize={3}>
        Caret Position
      </Heading>
      <CaretSelector current={pos} onChange={setPos} />
      <Relative pt={4}>
        <PointerBox m={4} p={2} minHeight={100} bg="bg.success" borderColor="border.success" caret={pos}>
          {' '}
          Content{' '}
        </PointerBox>
      </Relative>
    </Box>
  )
}

function CaretSelector(props) {
  const choices = [
    'top',
    'bottom',
    'left',
    'right',
    'left-bottom',
    'left-top',
    'right-bottom',
    'right-top',
    'top-left',
    'bottom-left',
    'top-right',
    'bottom-right'
  ].map(dir => (
    <label>
      <input
        key={dir}
        type="radio"
        name="caret"
        value={dir}
        checked={dir === props.current}
        onChange={() => props.onChange(dir)}
      />{' '}
      {dir}
    </label>
  ))

  return (
    <Grid gridTemplateColumns="repeat(4, auto)" gridGap={3} my={2}>
      {choices}
    </Grid>
  )
}

render(<PointerBoxDemo />)