Wonderland
Search…
A React Ribbon Component
It realy took me a long time to create such a unremarkable ribbon

Target

Code

1
export default function Ribbon({
2
width = 100,
3
height = 20,
4
text = "",
5
color = "#4ade80",
6
}: {
7
width?: number;
8
height?: number;
9
text?: string;
10
color?: string;
11
}) {
12
const sqrt2 = Math.sqrt(2);
13
const tinyUnit = ((sqrt2 - 1) / 4) * width - (sqrt2 / 4) * height;
14
const unitOffset = (1 / 2) * width + (sqrt2 / 2) * height + tinyUnit;
15
const ribbonStyle = `
16
.ribbonWrapper {
17
position: absolute;
18
right: 0;
19
top: -${tinyUnit}px;
20
right: -${tinyUnit}px;
21
z-index: 10;
22
width: ${width + tinyUnit}px;
23
height: ${width + tinyUnit}px;
24
overflow: hidden;
25
}
26
27
.ribbonWrapper::before {
28
content: "";
29
position: absolute;
30
width: ${tinyUnit * 2}px;
31
height: ${tinyUnit}px;
32
right: ${unitOffset}px;
33
border-top-left-radius: ${tinyUnit}px;
34
background-color: ${color};
35
background: -moz-linear-gradient(
36
left,
37
${color} 1%,
38
rgba(15, 51, 10, 1) 90%
39
); /* FF3.6+ */
40
background: -webkit-gradient(
41
linear,
42
left top,
43
right top,
44
color-stop(1%, ${color}),
45
color-stop(90%, rgba(15, 51, 10, 1))
46
); /* Chrome,Safari4+ */
47
background: -webkit-linear-gradient(
48
left,
49
${color} 1%,
50
rgba(15, 51, 10, 1) 90%
51
); /* Chrome10+,Safari5.1+ */
52
background: -o-linear-gradient(
53
left,
54
${color} 1%,
55
rgba(15, 51, 10, 1) 90%
56
); /* Opera 11.10+ */
57
background: -ms-linear-gradient(
58
left,
59
${color} 1%,ß
60
rgba(15, 51, 10, 1) 90%
61
); /* IE10+ */
62
background: linear-gradient(
63
to right,
64
${color} 1%,
65
rgba(15, 51, 10, 1) 90%
66
); /* W3C */
67
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#008a3b', endColorstr='#0f330a',GradientType=1 ); /* IE6-8 */
68
}
69
70
.ribbonWrapper::after {
71
content: "";
72
position: absolute;
73
width: ${tinyUnit}px;
74
height: ${tinyUnit * 2}px;
75
top: ${unitOffset}px;
76
right: 0px;
77
border-bottom-right-radius: ${tinyUnit}px;
78
background-color: #000;
79
background: -moz-linear-gradient(
80
top,
81
rgba(15, 51, 10, 1) 10%,
82
${color} 99%
83
); /* FF3.6+ */
84
background: -webkit-gradient(
85
linear,
86
left top,
87
left bottom,
88
color-stop(10%, rgba(15, 51, 10, 1)),
89
color-stop(99%, ${color})
90
); /* Chrome,Safari4+ */
91
background: -webkit-linear-gradient(
92
top,
93
rgba(15, 51, 10, 1) 10%,
94
${color} 99%
95
); /* Chrome10+,Safari5.1+ */
96
background: -o-linear-gradient(
97
top,
98
rgba(15, 51, 10, 1) 10%,
99
${color} 99%
100
); /* Opera 11.10+ */
101
background: -ms-linear-gradient(
102
top,
103
rgba(15, 51, 10, 1) 10%,
104
${color} 99%
105
); /* IE10+ */
106
background: linear-gradient(
107
to bottom,
108
rgba(15, 51, 10, 1) 10%,
109
${color} 99%
110
); /* W3C */
111
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0f330a', endColorstr='#008a3b',GradientType=0 ); /* IE6-8 */
112
}
113
114
.ribbonAnchor {
115
position: absolute;
116
bottom: 0;
117
left: 0;
118
width: ${width}px;
119
height: ${width}px;
120
#overflow: hidden;
121
}
122
123
.ribbon {
124
position: relative;
125
z-index: 10;
126
top: ${width / 4 - height / 2}px;
127
right: -${width / 4}px;
128
--tw-rotate: 45deg;
129
transform: var(--tw-transform);
130
width: ${width}px;
131
height: ${height}px;
132
display: flex;
133
justify-content: center;
134
align-items: center;
135
background-color: ${color};
136
}
137
`;
138
return (
139
<>
140
<style>{ribbonStyle}</style>
141
<div className="ribbonWrapper">
142
<div className="ribbonAnchor">
143
<div className="ribbon">
144
<span className="text-sm text-white">{text}</span>
145
</div>
146
</div>
147
</div>
148
</>
149
);
150
}
Copied!

Reference

The key to success is AB, LOL
The transition is moving the gray box to the red one, and the position of the Center' is at a quarter to the top and a quarter to the right of the square.
The following is the original version on paper:
And idea from...
Copy link