From e61936c7813d001646ee78487a8f514b9bd5f739 Mon Sep 17 00:00:00 2001
From: Phuoc Nguyen <me@phuoc.ng>
Date: Sun, 9 May 2021 17:31:09 +0700
Subject: [PATCH] Add concave corners pattern

---
 client/constants/Pattern.ts                   |   1 +
 client/pages/ExplorePage.tsx                  |   1 +
 client/patterns/concave-corners/Cover.tsx     |  76 ++++++++++
 client/patterns/concave-corners/Details.tsx   | 139 ++++++++++++++++++
 .../concave-corners/concave-corners.css       |  66 +++++++++
 client/patterns/inverted-corners/Details.tsx  |   3 +
 client/placeholders/BrowserFrame.tsx          |   8 +-
 client/placeholders/browserFrame.css          |   4 +
 public/assets/patterns/concave-corners.png    | Bin 0 -> 3009 bytes
 public/sitemap.xml                            |   3 +
 10 files changed, 299 insertions(+), 2 deletions(-)
 create mode 100644 client/patterns/concave-corners/Cover.tsx
 create mode 100644 client/patterns/concave-corners/Details.tsx
 create mode 100644 client/patterns/concave-corners/concave-corners.css
 create mode 100644 public/assets/patterns/concave-corners.png

diff --git a/client/constants/Pattern.ts b/client/constants/Pattern.ts
index 544d891..abb180c 100644
--- a/client/constants/Pattern.ts
+++ b/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',
diff --git a/client/pages/ExplorePage.tsx b/client/pages/ExplorePage.tsx
index 8eb088f..f0c646a 100644
--- a/client/pages/ExplorePage.tsx
+++ b/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} />
diff --git a/client/patterns/concave-corners/Cover.tsx b/client/patterns/concave-corners/Cover.tsx
new file mode 100644
index 0000000..22b72b2
--- /dev/null
+++ b/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;
diff --git a/client/patterns/concave-corners/Details.tsx b/client/patterns/concave-corners/Details.tsx
new file mode 100644
index 0000000..0e9c23b
--- /dev/null
+++ b/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;
diff --git a/client/patterns/concave-corners/concave-corners.css b/client/patterns/concave-corners/concave-corners.css
new file mode 100644
index 0000000..c7155ae
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/client/patterns/inverted-corners/Details.tsx b/client/patterns/inverted-corners/Details.tsx
index aa9ad02..f4d6708 100644
--- a/client/patterns/inverted-corners/Details.tsx
+++ b/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>
     );
 };
diff --git a/client/placeholders/BrowserFrame.tsx b/client/placeholders/BrowserFrame.tsx
index acae7c8..6c4ef83 100644
--- a/client/placeholders/BrowserFrame.tsx
+++ b/client/placeholders/BrowserFrame.tsx
@@ -16,8 +16,12 @@ interface BrowserFrameProps {
 const BrowserFrame: React.FC<BrowserFrameProps> = ({ children, css, html }) => {
     return (
         <>
-            <SampleCode fullHeight={true} lang="html" code={html} />
-            <SampleCode fullHeight={true} lang="css" code={css} />
+            <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>
diff --git a/client/placeholders/browserFrame.css b/client/placeholders/browserFrame.css
index 48201d0..188aaac 100644
--- a/client/placeholders/browserFrame.css
+++ b/client/placeholders/browserFrame.css
@@ -7,4 +7,8 @@
     border: 1px solid rgba(0, 0, 0, 0.2);
     height: 32rem;
     overflow: auto;
+}
+
+.demo__html {
+    border-bottom: 1px solid rgba(0, 0, 0, 0.5);
 }
\ No newline at end of file
diff --git a/public/assets/patterns/concave-corners.png b/public/assets/patterns/concave-corners.png
new file mode 100644
index 0000000000000000000000000000000000000000..db2b1110a7ef1ae978b05b5a378044be9d0a04bf
GIT binary patch
literal 3009
zcmeAS@N?(olHy`uVBq!ia0y~yU@`z=1`al$$eix5LqLkLILO_JVcj{ImkbQt)t)Yn
zAr*7p-c`(xj$~?kxLKS1h{6&^MYXji{}@v_b<eKn)zQmd(j?@b<><`Q#FQl9y*a^j
z^~5ymS+Tj_=WVZ?7yn^m^4@*>zW>UXx3BwC%D~XF=9t9ex3{-@zh_|h;hmSCfBgP*
zIYx#L^Mwo;9Qqm<8H!kV7$ztuFf_<8GBZ5kkYG@7Kfu6X$;8HRLU2^cXt<0f28>Ly
zW||yB{j+D!(q3|YNQ#Y**SBTdcUn|p+1DRGc6?!}xX9Oj_>%C0-7GwptLp0Fs+jg<
z`1|{N`!~E7GVnRwuC8-hG9`_vE%WX7-%HgGbU))UGG;uyMNUp`+B^pRS;i;Mu<!)$
z+P`1^_~XKtk{=ey_8%{-uiyWL=f`%S#I3hw-u?`2n@{Wk8ozV*?$1Bed>$28^z7cf
zdujRsc@BwXpMLzX*jMv&(-)ox<v{w;ULPO#0|vd1KU&z;{CIFrd`8dalRZF_J}`0?
z7rV{uZAdKa@9%&7_xE?bz{5}Ggr+GaL|nOhcW!>Ez^B_&CCtBVGWqXzR_WdQ_s8?L
zf8HX<0(8*E+i#C;&%b}HY`5&}vuQ6q_c$=M$-n#fvCziezJK}h<s0w6KYsXdv$oy`
zVG9|)$CsD;KmPpu{Nq1=YGPtydcIcK`uX`CyLt2GrO!W3a!S;#m_2*;QgsIV8y_oV
ze*gW)|9@^tZSCF*N^wlzN0T2$@*7NLG%zb1IREz7uPPf`+up+u4d%_8cdTx|JU>7G
z;|d!+Tize?k!!<{<K5r?c-7vxDlvOY#>4#E<JJRta_i&vN&%BmkKwVufB)WiTlToX
zLT3-(kNmmw=JmZT`@O!H_rE_=n`@5Q?2R{bj^%Baj^AHb>dNL6w)*OgyzP&_zP|45
z|B$tqpQrm4ko)RY)|#*=DK4Pwj$ONi^mY6WY}m1R^X8B5?(QxuE8F%(<bl7%>N73}
z3|c2oo?KX2`O=HWCu?g|@9ER03yX?2eG!pJ=8#Y;Dk^&PTxG_Ee0%9mabTX9aSE7T
zD?UFvd&#)r{>{AYb!JIcOl>d!d^)ZF_{*1)my!p5JYRe%??$Q{Q=4Y)_S?Ypd^j>C
z4#Y8&{(k7dp|I6cr(ZGD1!nbg=g&`vXZ6dwcI=1%l@aF@jD>;a!~BB>H_dTOQ%jgJ
zt=#XxCKevBXtjDmWL)}zGd9l-URk$(Jy83BmYBxT+IzIgGTKffxBa@>@Ys&Mdt<BE
d84kpM<9B`bH{kG!{Dlla;OXk;vd$@?2>@7aZ$bb7

literal 0
HcmV?d00001

diff --git a/public/sitemap.xml b/public/sitemap.xml
index dc97d3b..81de73a 100644
--- a/public/sitemap.xml
+++ b/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>