Merge pull request #189 from phuoc-ng/concave-corners

Pattern 102: Add concave corners pattern

client/constants/Pattern.ts

@@ -18,6 +18,7 @@ enum Pattern {
     CircularNavigation = 'Circular navigation',
     CloseButton = 'Close button',
     ColorSwatch = 'Color swatch',
+    ConcaveCorners = 'Concave corners',
     CookieBanner = 'Cookie banner',
     CornerRibbon = 'Corner ribbon',
     CurvedBackground = 'Curved background',

client/pages/ExplorePage.tsx

@@ -120,6 +120,7 @@ const ExplorePage = () => {
                                 <CoverCard pattern={Pattern.Centering} />
                                 <CoverCard pattern={Pattern.CloseButton} />
                                 <CoverCard pattern={Pattern.ColorSwatch} />
+                                <CoverCard pattern={Pattern.ConcaveCorners} />
                                 <CoverCard pattern={Pattern.CookieBanner} />
                                 <CoverCard pattern={Pattern.CornerRibbon} />
                                 <CoverCard pattern={Pattern.CurvedBackground} />

client/patterns/concave-corners/Cover.tsx

@@ -0,0 +1,76 @@
+/** * 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: '1rem',
+                }}
+            >
+                <div
+                    style={{
+                        backgroundColor: 'rgba(0, 0, 0, .3)',
+                        height: '100%',
+                        position: 'relative',
+                        width: '100%',
+                    }}
+                >
+                    <div
+                        style={{
+                            background: 'var(--current-background-color, #FFF)',
+                            borderRadius: '0 0 1rem 0',
+                            height: '1rem',
+                            left: 0,
+                            position: 'absolute',
+                            top: 0,
+                            width: '1rem',
+                        }}
+                    />
+                    <div
+                        style={{
+                            background: 'var(--current-background-color, #FFF)',
+                            borderRadius: '0 0 0 1rem',
+                            height: '1rem',
+                            position: 'absolute',
+                            right: 0,
+                            top: 0,
+                            width: '1rem',
+                        }}
+                    />
+                    <div
+                        style={{
+                            background: 'var(--current-background-color, #FFF)',
+                            borderRadius: '0 1rem 0 0',
+                            bottom: 0,
+                            height: '1rem',
+                            left: 0,
+                            position: 'absolute',
+                            width: '1rem',
+                        }}
+                    />
+                    <div
+                        style={{
+                            background: 'var(--current-background-color, #FFF)',
+                            borderRadius: '1rem 0 0 0',
+                            bottom: 0,
+                            height: '1rem',                            
+                            position: 'absolute',
+                            right: 0,
+                            width: '1rem',
+                        }}
+                    />
+                </div>
+            </div>
+        </Frame>
+    );
+};
+
+export default Cover;

client/patterns/concave-corners/Details.tsx

@@ -0,0 +1,139 @@
+/**
+ * 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 RelatedPatterns from '../../components/RelatedPatterns';
+import Pattern from '../../constants/Pattern';
+import DetailsLayout from '../../layouts/DetailsLayout';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+
+import './concave-corners.css';
+
+const Details: React.FC<{}> = () => {
+    return (
+        <DetailsLayout pattern={Pattern.ConcaveCorners}>
+            <Helmet>
+                <meta name="description" content="Create concave corners with CSS" />
+                <meta name="og:description" content="Create concave corners with CSS" />
+                <meta name="twitter:description" content="Create concave corners with CSS" />
+                <meta name="keywords" content="css border radius, css concave border radius, css concave corners" />
+            </Helmet>
+            <BrowserFrame
+html={`
+<div class="concave-corners">
+    <!-- The top-left corner -->
+    <div class="concave-corners__corner concave-corners__corner--tl"></div>
+
+    <!-- The top-right corner -->
+    <div class="concave-corners__corner concave-corners__corner--tr"></div>
+
+    <!-- The bottom-left corner -->
+    <div class="concave-corners__corner concave-corners__corner--bl"></div>
+
+    <!-- The bottom-right corner -->
+    <div class="concave-corners__corner concave-corners__corner--br"></div>
+
+    <!-- Content -->
+    ...
+</div>
+`}
+css={`
+:root {
+    --concave-corners-background: rgba(0, 0, 0, .3);
+    --concave-corners-size: 1rem;
+}
+
+.concave-corners {
+    background-color: var(--concave-corners-background);
+    
+    /* Used to position the corners */
+    position: relative;
+
+    /* Misc */
+    height: 100%;
+}
+
+.concave-corners__corner {
+    /* Absolute position */
+    position: absolute;
+
+    /* Size */
+    height: var(--concave-corners-size);    
+    width: var(--concave-corners-size);
+
+    background: #FFF;
+}
+
+.concave-corners__corner--tl {
+    /* Position */
+    left: 0;
+    top: 0;
+
+    /* Border radius */
+    border-radius: 0 0 var(--concave-corners-size) 0;
+}
+
+.concave-corners__corner--tr {
+    /* Position */ 
+    right: 0;
+    top: 0;
+
+    /* Border radius */
+    border-radius: 0 0 0 var(--concave-corners-size);
+}
+
+.concave-corners__corner--bl {
+    /* Position */
+    bottom: 0;
+    left: 0;
+
+    /* Border radius */
+    border-radius: 0 var(--concave-corners-size) 0 0;
+}
+
+.concave-corners__corner--br {
+    /* Position */
+    bottom: 0;
+    right: 0;
+
+    /* Border radius */
+    border-radius: var(--concave-corners-size) 0 0 0;
+}
+`}
+            >
+                <div
+                    style={{
+                        alignItems: 'center',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        height: '100%',
+                        justifyContent: 'center',
+                        padding: '1rem',
+                    }}
+                >
+                    <div
+                        style={{
+                            height: '8rem',
+                            width: '16rem',
+                        }}
+                    >
+                        <div className='concave-corners'>
+                            <div className='concave-corners__corner concave-corners__corner--tl' />
+                            <div className='concave-corners__corner concave-corners__corner--tr' />
+                            <div className='concave-corners__corner concave-corners__corner--bl' />
+                            <div className='concave-corners__corner concave-corners__corner--br' />
+                        </div>
+                    </div>
+                </div>
+            </BrowserFrame>
+
+            <RelatedPatterns patterns={[Pattern.InvertedCorners]} />
+        </DetailsLayout>
+    );
+};
+
+export default Details;

client/patterns/concave-corners/concave-corners.css

@@ -0,0 +1,66 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
+:root {
+    --concave-corners-background: rgba(0, 0, 0, .3);
+    --concave-corners-size: 1rem;
+}
+
+.concave-corners {
+    background-color: var(--concave-corners-background);
+    
+    /* Used to position the corners */
+    position: relative;
+
+    /* Misc */
+    height: 100%;
+}
+
+.concave-corners__corner {
+    /* Absolute position */
+    position: absolute;
+
+    /* Size */
+    height: var(--concave-corners-size);    
+    width: var(--concave-corners-size);
+
+    background: #FFF;
+}
+
+.concave-corners__corner--tl {
+    /* Position */
+    left: 0;
+    top: 0;
+
+    /* Border radius */
+    border-radius: 0 0 var(--concave-corners-size) 0;
+}
+
+.concave-corners__corner--tr {
+    /* Position */ 
+    right: 0;
+    top: 0;
+
+    /* Border radius */
+    border-radius: 0 0 0 var(--concave-corners-size);
+}
+
+.concave-corners__corner--bl {
+    /* Position */
+    bottom: 0;
+    left: 0;
+
+    /* Border radius */
+    border-radius: 0 var(--concave-corners-size) 0 0;
+}
+
+.concave-corners__corner--br {
+    /* Position */
+    bottom: 0;
+    right: 0;
+
+    /* Border radius */
+    border-radius: var(--concave-corners-size) 0 0 0;
+}

client/patterns/inverted-corners/Details.tsx

@@ -7,6 +7,7 @@ import * as React from 'react';
 import { Helmet } from 'react-helmet';
 
 import Heading from '../../components/Heading';
+import RelatedPatterns from '../../components/RelatedPatterns';
 import Pattern from '../../constants/Pattern';
 import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
@@ -94,6 +95,8 @@ css={`
                     <div className='inverted-corners inverted-corners--speech'>Speech Bubble</div>
                 </div>
             </section>
+
+            <RelatedPatterns patterns={[Pattern.ConcaveCorners]} />
         </DetailsLayout>
     );
 };

client/placeholders/BrowserFrame.tsx

@@ -16,8 +16,12 @@ interface BrowserFrameProps {
 const BrowserFrame: React.FC<BrowserFrameProps> = ({ children, css, html }) => {
     return (
         <>
+            <div className="demo__html">
                 <SampleCode fullHeight={true} lang="html" code={html} />
+            </div>
+            <div className="demo__css">
                 <SampleCode fullHeight={true} lang="css" code={css} />
+            </div>
             <div className="demo__live">
                 {children}
             </div>

client/placeholders/browserFrame.css

@@ -8,3 +8,7 @@
     height: 32rem;
     overflow: auto;
 }
+
+.demo__html {
+    border-bottom: 1px solid rgba(0, 0, 0, 0.5);
+}

public/sitemap.xml

@@ -16,6 +16,8 @@
     <url><loc>https://csslayout.io/patterns/chip</loc></url>
     <url><loc>https://csslayout.io/patterns/circular-navigation</loc></url>
     <url><loc>https://csslayout.io/patterns/close-button</loc></url>
+    <url><loc>https://csslayout.io/patterns/color-swatch</loc></url>
+    <url><loc>https://csslayout.io/patterns/concave-corners</loc></url>
     <url><loc>https://csslayout.io/patterns/cookie-banner</loc></url>
     <url><loc>https://csslayout.io/patterns/corner-ribbon</loc></url>
     <url><loc>https://csslayout.io/patterns/curved-background</loc></url>
@@ -41,6 +43,7 @@
     <url><loc>https://csslayout.io/patterns/holy-grail</loc></url>
     <url><loc>https://csslayout.io/patterns/initial-avatar</loc></url>
     <url><loc>https://csslayout.io/patterns/input-addon</loc></url>
+    <url><loc>https://csslayout.io/patterns/inverted-corners</loc></url>
     <url><loc>https://csslayout.io/patterns/keyboard-shortcut</loc></url>
     <url><loc>https://csslayout.io/patterns/layered-card</loc></url>
     <url><loc>https://csslayout.io/patterns/lined-paper</loc></url>