The Shapes of CSS ทำได้ขนาดนี้เชียว
All of the below use only a single HTML element. Any kind of CSS goes, as long as it's supported in at least one browser.
Square
<a class="hashtag" href="/tags/square">#square</a> {
width: 100px;
height: 100px;
background: red;
}
Rectangle
<a class="hashtag" href="/tags/rectangle">#rectangle</a> {
width: 200px;
height: 100px;
background: red;
Circle
<a class="hashtag" href="/tags/circle">#circle</a> {
width: 100px;
height: 100px;
background: red;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}
/* Cleaner, but slightly less support: use "50%" as value */
Oval
Triangle Up
Triangle Down
Triangle Left
Triangle Right
Triangle Top Left
Triangle Top Right
Triangle Bottom Left
Triangle Bottom Right
Curved Tail Arrow via Ando Razafimandimby
Trapezoid
Parallelogram
Trapezoid
Star (6-points)
Star (5-points) via Kit MacAllister
Pentagon
Hexagon
Octagon
Heart via Nicolas Gallagher
Infinity via Nicolas Gallagher
Diamond Square via Joseph Silber
Diamond Shield via Joseph Silber
Diamond Narrow via Joseph Silber
Cut Diamond via Alexander Futekov
Egg
Pac-Man
Talk Bubble
12 Point Burst via Alan Johnson
8 Point Burst via Alan Johnson
Yin Yang via Alexander Futekov
Badge Ribbon via Catalin Rosu
แบบอื่น ๆ