1
0
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:
Phuoc Nguyen
2019-11-17 12:32:18 +07:00
parent 6a26525fdb
commit ca8b2a3c42

View 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;