mirror of
https://github.com/phuoc-ng/csslayout.git
synced 2025-08-11 08:34:27 +02:00
Add triangle placeholder
This commit is contained in:
42
client/placeholders/Triangle.jsx
Normal file
42
client/placeholders/Triangle.jsx
Normal file
@@ -0,0 +1,42 @@
|
|||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
const Triangle = ({ size = 16, corner = 'tl' }) => {
|
||||||
|
let bw = '';
|
||||||
|
let bc = '';
|
||||||
|
switch (corner) {
|
||||||
|
case 'tr':
|
||||||
|
bw = `0 ${size}px ${size}px 0`;
|
||||||
|
bc = 'transparent rgba(0, 0, 0, .3) transparent transparent';
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 'br':
|
||||||
|
bw = `0 0 ${size}px ${size}px`;
|
||||||
|
bc = 'transparent transparent rgba(0, 0, 0, .3) transparent';
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 'bl':
|
||||||
|
bw = `${size}px 0 0 ${size}px`;
|
||||||
|
bc = 'transparent transparent transparent rgba(0, 0, 0, .3)';
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 'tl':
|
||||||
|
default:
|
||||||
|
bw = `${size}px ${size}px 0 0`;
|
||||||
|
bc = 'rgba(0, 0, 0, .3) transparent transparent transparent';
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
borderColor: bc,
|
||||||
|
borderStyle: 'solid',
|
||||||
|
borderWidth: bw,
|
||||||
|
height: 0,
|
||||||
|
width: 0,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Triangle;
|
Reference in New Issue
Block a user