solid-color/dist/source/components/photoshop/PhotoshopPointer.jsx

<p> <img width="100%" src="https://assets.solidjs.com/banner?type=solid-color&background=tiles&project=%20" alt="solid-color"> </p>

export default function PhotoshopPointerCircle() {
    const triangleStyles = {
        width: 0,
        height: 0,
        'border-style': 'solid',
        'border-width': '4px 0 4px 6px',
        'border-color': 'transparent transparent transparent #fff',
        position: 'absolute',
        top: '1px',
        left: '1px',
    };
    const triangleBorderStyles = {
        width: 0,
        height: 0,
        'border-style': 'solid',
        'border-width': '5px 0 5px 8px',
        'border-color': 'transparent transparent transparent #555',
    };
    const styles = {
        left: {
            ...triangleBorderStyles,
            transform: 'translate(-13px, -4px)',
        },
        leftInside: {
            ...triangleStyles,
            transform: 'translate(-8px, -5px)',
        },
        right: {
            ...triangleBorderStyles,
            transform: 'translate(20px, -14px) rotate(180deg)',
        },
        rightInside: {
            ...triangleStyles,
            transform: 'translate(-8px, -5px)',
        },
    };
    return (<div style={styles.pointer}>
      <div style={styles.left}>
        <div style={styles.leftInside}/>
      </div>

      <div style={styles.right}>
        <div style={styles.rightInside}/>
      </div>
    </div>);
}