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