mirror of
https://github.com/phuoc-ng/csslayout.git
synced 2025-08-11 08:34:27 +02:00
Add inverted corners pattern
This commit is contained in:
@@ -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',
|
||||
|
@@ -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);
|
||||
|
@@ -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} />
|
||||
|
43
client/patterns/inverted-corners/Cover.tsx
Normal file
43
client/patterns/inverted-corners/Cover.tsx
Normal file
@@ -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;
|
101
client/patterns/inverted-corners/Details.tsx
Normal file
101
client/patterns/inverted-corners/Details.tsx
Normal file
@@ -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;
|
53
client/patterns/inverted-corners/inverted-corners.css
Normal file
53
client/patterns/inverted-corners/inverted-corners.css
Normal file
@@ -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;
|
||||
}
|
Reference in New Issue
Block a user