diff --git a/contents/_includes/patterns/concave-corners.njk b/contents/_includes/patterns/concave-corners.njk new file mode 100644 index 0000000..7f0ed22 --- /dev/null +++ b/contents/_includes/patterns/concave-corners.njk @@ -0,0 +1,6 @@ +
+
+
+
+
+
\ No newline at end of file diff --git a/contents/concave-corners.md b/contents/concave-corners.md new file mode 100644 index 0000000..1816e03 --- /dev/null +++ b/contents/concave-corners.md @@ -0,0 +1,88 @@ +--- +layout: layouts/post.njk +title: Concave corners +description: Create concave corners with CSS +keywords: css border radius, css concave border radius, css concave corners +--- + +## HTML + +```html +
+ +
+ + +
+ + +
+ + +
+ + + ... +
+``` + +## CSS + +```css +.concave-corners { + background-color: rgba(0, 0, 0, .3); + + /* Used to position the corners */ + position: relative; +} +.concave-corners__corner { + /* Absolute position */ + position: absolute; + + /* Size */ + height: 1rem; + width: 1rem; + + background: #fff; +} + +.concave-corners__corner--tl { + /* Position */ + left: 0; + top: 0; + + /* Border radius */ + border-radius: 0 0 1rem 0; +} + +.concave-corners__corner--tr { + /* Position */ + right: 0; + top: 0; + + /* Border radius */ + border-radius: 0 0 0 1rem; +} + +.concave-corners__corner--bl { + /* Position */ + bottom: 0; + left: 0; + + /* Border radius */ + border-radius: 0 1rem 0 0; +} + +.concave-corners__corner--br { + /* Position */ + bottom: 0; + right: 0; + + /* Border radius */ + border-radius: 1rem 0 0 0; +} +``` + +{% demo %} +{% include "patterns/concave-corners.njk" %} +{% enddemo %} diff --git a/contents/index.njk b/contents/index.njk index 11ed38c..678a2fe 100644 --- a/contents/index.njk +++ b/contents/index.njk @@ -67,6 +67,12 @@ eleventyExcludeFromCollections: true
Color swatch
+
+ +
{% include "patterns/concave-corners.njk" %}
+
Concave corners
+ +
diff --git a/pages/concave-corners/index.tsx b/pages/concave-corners/index.tsx deleted file mode 100644 index dcf9565..0000000 --- a/pages/concave-corners/index.tsx +++ /dev/null @@ -1,134 +0,0 @@ -import * as React from 'react'; -import Head from 'next/head'; -import { 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 { - --concave-corners-background: rgba(0, 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; - } - `} - > -
-
-
-
-
-
-
-
-
-
- - - - - - ); -}; - -export default Details; diff --git a/patterns/concave-corners/Cover.tsx b/patterns/concave-corners/Cover.tsx deleted file mode 100644 index 643fce0..0000000 --- a/patterns/concave-corners/Cover.tsx +++ /dev/null @@ -1,72 +0,0 @@ -import * as React from 'react'; - -import Frame from '../../placeholders/Frame'; - -const Cover: React.FC<{}> = () => { - return ( - -
-
-
-
-
-
-
-
- - ); -}; - -export default Cover; diff --git a/styles/index.scss b/styles/index.scss index ac2818a..dd0a04f 100644 --- a/styles/index.scss +++ b/styles/index.scss @@ -20,6 +20,7 @@ @import './patterns/centering'; @import './patterns/close-button'; @import './patterns/color-swatch'; +@import './patterns/concave-corners'; // Placeholders @import './placeholders/circle'; diff --git a/styles/patterns/_concave-corners.scss b/styles/patterns/_concave-corners.scss new file mode 100644 index 0000000..d289d7d --- /dev/null +++ b/styles/patterns/_concave-corners.scss @@ -0,0 +1,56 @@ +.concave-corners { + background-color: rgba(0, 0, 0, .3); + + /* Used to position the corners */ + position: relative; + + /* Misc */ + height: 100%; + width: 100%; +} +.concave-corners__corner { + /* Absolute position */ + position: absolute; + + /* Size */ + height: 1rem; + width: 1rem; + + background: #fff; +} + +.concave-corners__corner--tl { + /* Position */ + left: 0; + top: 0; + + /* Border radius */ + border-radius: 0 0 1rem 0; +} + +.concave-corners__corner--tr { + /* Position */ + right: 0; + top: 0; + + /* Border radius */ + border-radius: 0 0 0 1rem; +} + +.concave-corners__corner--bl { + /* Position */ + bottom: 0; + left: 0; + + /* Border radius */ + border-radius: 0 1rem 0 0; +} + +.concave-corners__corner--br { + /* Position */ + bottom: 0; + right: 0; + + /* Border radius */ + border-radius: 1rem 0 0 0; +} \ No newline at end of file