50 lines
No EOL
827 B
Markdown
50 lines
No EOL
827 B
Markdown
Rotating arrow
|
|
|
|
```html
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<style>
|
|
.arrow {
|
|
border: solid black;
|
|
border-width: 0 3px 3px 0;
|
|
display: inline-block;
|
|
padding: 3px;
|
|
}
|
|
|
|
.right {
|
|
transform: rotate(-45deg);
|
|
-webkit-transform: rotate(-45deg);
|
|
}
|
|
|
|
.left {
|
|
transform: rotate(135deg);
|
|
-webkit-transform: rotate(135deg);
|
|
}
|
|
|
|
.up {
|
|
transform: rotate(-135deg);
|
|
-webkit-transform: rotate(-135deg);
|
|
}
|
|
|
|
.down {
|
|
transform: rotate(45deg);
|
|
-webkit-transform: rotate(45deg);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<h2>CSS Arrows</h2>
|
|
|
|
<p>arrow: <i class="arrow"></i></p>
|
|
<p>Right arrow: <i class="arrow right"></i></p>
|
|
<p>Left arrow: <i class="arrow left"></i></p>
|
|
<p>Up arrow: <i class="arrow up"></i></p>
|
|
<p>Down arrow: <i class="arrow down"></i></p>
|
|
|
|
</body>
|
|
</html>
|
|
|
|
``` |