Add inverted corners pattern

client/constants/Pattern.ts

@@ -43,6 +43,7 @@ enum Pattern {
     HolyGrail = 'Holy grail',
     InitialAvatar = 'Initial avatar',
     InputAddon = 'Input addon',
+    InvertedCorners = 'Inverted corners',
     KeyboardShortcut = 'Keyboard shortcut',
     LayeredCard = 'Layered card',
     LinedPaper = 'Lined paper',

client/index.css

@@ -47,7 +47,6 @@ a {
 }
 .main {
     flex: 1;
-    overflow: auto;
 }
 .sidebar {
     display: none;
@@ -80,7 +79,7 @@ a {
     font-size: 2rem;
     line-height: 1.5;
     text-align: center;
-    text-transform: capitalize;
+    text-transform: uppercase;
 }
 .hero__subheading {
     color: var(--color-gray-9);

client/pages/ExplorePage.tsx

@@ -136,6 +136,7 @@ const ExplorePage = () => {
                                 <CoverCard pattern={Pattern.FolderStructure} />
                                 <CoverCard pattern={Pattern.FullBackground} />
                                 <CoverCard pattern={Pattern.InitialAvatar} />
+                                <CoverCard pattern={Pattern.InvertedCorners} />
                                 <CoverCard pattern={Pattern.KeyboardShortcut} />
                                 <CoverCard pattern={Pattern.LayeredCard} />
                                 <CoverCard pattern={Pattern.LinedPaper} />

client/patterns/inverted-corners/Cover.tsx

@@ -0,0 +1,43 @@
+/** * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
+import * as React from 'react';
+
+import Frame from '../../placeholders/Frame';
+
+const Cover: React.FC<{}> = () => {
+    return (
+        <Frame>
+            <div
+                style={{
+                    height: '100%',
+                    padding: '1.5rem',
+                }}
+            >
+                <div
+                    style={{
+                        backgroundColor: '#52525B',
+                        height: '100%',
+                        position: 'relative',
+                        width: '100%',
+                    }}
+                >
+                    <div
+                        style={{
+                            backgroundColor: 'transparent',
+                            borderTopLeftRadius: '1rem',
+                            bottom: '-2rem',
+                            boxShadow: '0 -1rem 0 0 #52525B',
+                            height: '2rem',
+                            position: 'absolute',
+                            width: '1rem',
+                        }}
+                    />
+                </div>
+            </div>
+        </Frame>
+    );
+};
+
+export default Cover;

client/patterns/inverted-corners/Details.tsx

@@ -0,0 +1,101 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
+import * as React from 'react';
+import { Helmet } from 'react-helmet';
+
+import Heading from '../../components/Heading';
+import Pattern from '../../constants/Pattern';
+import DetailsLayout from '../../layouts/DetailsLayout';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+
+import './inverted-corners.css';
+
+const Details: React.FC<{}> = () => {
+    return (
+        <DetailsLayout pattern={Pattern.InvertedCorners}>
+            <Helmet>
+                <meta name="description" content="Create inverted corners with CSS" />
+                <meta name="og:description" content="Create inverted corners with CSS" />
+                <meta name="twitter:description" content="Create inverted corners with CSS" />
+                <meta name="keywords" content="css border radius, css inverted border radius, css inverted corners" />
+            </Helmet>
+            <BrowserFrame
+html={`
+<div class="inverted-corners">
+    ...
+</div>
+`}
+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;
+}
+`}
+            >
+                <div
+                    style={{
+                        alignItems: 'center',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        height: '100%',
+                        justifyContent: 'center',
+                        padding: '1rem',
+                    }}
+                >
+                    <div
+                        style={{
+                            height: '8rem',
+                            width: '16rem',
+                        }}
+                    >
+                        <div className='inverted-corners'></div>
+                    </div>
+                </div>
+            </BrowserFrame>
+
+            <section>
+                <Heading title="Use case" />
+
+                <div
+                    style={{
+                        height: '8rem',
+                        width: '16rem',
+                    }}
+                >
+                    <div className='inverted-corners inverted-corners--speech'>Speech Bubble</div>
+                </div>
+            </section>
+        </DetailsLayout>
+    );
+};
+
+export default Details;

client/patterns/inverted-corners/inverted-corners.css

@@ -0,0 +1,53 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
+:root {
+    --inverted-corners-background: #52525B;
+    --inverted-corners-size: 2rem;
+}
+
+.inverted-corners {
+    background-color: var(--inverted-corners-background);
+    
+    /* Used to position the corner */
+    position: relative;
+
+    /* Misc */
+    height: 100%;
+}
+
+.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 case */
+.inverted-corners--speech {
+    /* Border radius */
+    border-bottom-right-radius: var(--inverted-corners-size);
+    border-top-left-radius: var(--inverted-corners-size);
+    border-top-right-radius: var(--inverted-corners-size);
+
+    /* Center the content */
+    align-items: center;
+    display: flex;
+    justify-content: center;
+
+    /* Misc */
+    color: #FFF;
+}