import * as React from 'react'; import Head from 'next/head'; import { Heading, Spacer } from '@1milligram/design'; import { RelatedPatterns } from '../../components/RelatedPatterns'; import { Pattern } from '../../constants/Pattern'; import { PatternLayout } from '../../layouts/PatternLayout'; import BrowserFrame from '../../placeholders/BrowserFrame'; const Details: React.FC<{}> = () => { return ( ... `} css={` :root { --inverted-corners-background: #52525b; --inverted-corners-size: 2rem; } .inverted-corners { background-color: var(--inverted-corners-background); /* Used to position the corner */ position: relative; } .inverted-corners::before { content: ''; /* Absolute position */ bottom: calc(-2 * var(--inverted-corners-size)); left: 0; position: absolute; /* Size */ height: calc(2 * var(--inverted-corners-size)); width: var(--inverted-corners-size); /* Border */ background-color: transparent; border-top-left-radius: var(--inverted-corners-size); box-shadow: var(--inverted-corners-background) 0px calc(-1 * var(--inverted-corners-size)) 0px 0px; } `} >

Use cases

Speech Bubble

); }; export default Details;