diff --git a/contents/_includes/patterns/inverted-corners.njk b/contents/_includes/patterns/inverted-corners.njk new file mode 100644 index 0000000..cc73416 --- /dev/null +++ b/contents/_includes/patterns/inverted-corners.njk @@ -0,0 +1,2 @@ +
+
\ No newline at end of file diff --git a/contents/index.njk b/contents/index.njk index 420fb7b..014611e 100644 --- a/contents/index.njk +++ b/contents/index.njk @@ -163,6 +163,12 @@ eleventyExcludeFromCollections: true
Initial avatar
+
+ +
{% include "patterns/inverted-corners.njk" %}
+
Inverted corners
+ +
{% include "patterns/triangle-buttons.njk" %}
diff --git a/contents/inverted-corners.md b/contents/inverted-corners.md new file mode 100644 index 0000000..f28c936 --- /dev/null +++ b/contents/inverted-corners.md @@ -0,0 +1,52 @@ +--- +layout: layouts/post.njk +title: Inverted corners +description: Create inverted corners with CSS +keywords: css border radius, css inverted border radius, css inverted corners +--- + +## HTML + +```html +
+ ... +
+``` + +## CSS + +```css +:root { + --inverted-corners-background: #d1d5db; + --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; +} +``` + +{% demo %} +{% include "patterns/inverted-corners.njk" %} +{% enddemo %} diff --git a/pages/inverted-corners/index.tsx b/pages/inverted-corners/index.tsx deleted file mode 100644 index 62a8fd1..0000000 --- a/pages/inverted-corners/index.tsx +++ /dev/null @@ -1,100 +0,0 @@ -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; diff --git a/patterns/inverted-corners/Cover.tsx b/patterns/inverted-corners/Cover.tsx deleted file mode 100644 index 10acf14..0000000 --- a/patterns/inverted-corners/Cover.tsx +++ /dev/null @@ -1,39 +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 6337810..83d2707 100644 --- a/styles/index.scss +++ b/styles/index.scss @@ -36,6 +36,7 @@ @import './patterns/fixed-at-side'; @import './patterns/full-background'; @import './patterns/initial-avatar'; +@import './patterns/inverted-corners'; @import './patterns/triangle-buttons'; @import './patterns/video-background'; @import './patterns/voting'; diff --git a/styles/patterns/_inverted-corners.scss b/styles/patterns/_inverted-corners.scss new file mode 100644 index 0000000..5d6b564 --- /dev/null +++ b/styles/patterns/_inverted-corners.scss @@ -0,0 +1,33 @@ +:root { + --inverted-corners-background: #d1d5db; + --inverted-corners-size: 2rem; +} + +.inverted-corners { + background-color: var(--inverted-corners-background); + + /* Used to position the corner */ + position: relative; + + /* Demo */ + height: 50%; + width: 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; +}