Live Code Editor Version 2.0

Hướng dẫn tạo các dấu mũi tên với CSS - Demo RUN

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style type="text/css">
			.container {
			    width: 80%;
			    border-radius: 5px;
			    background-color: #f2f2f2;
			    padding: 20px;
			    margin: auto;
			}
			h2 {
				text-align: center;
			}
			i {
			    border: solid black;
			    border-width: 0 3px 3px 0;
			    display: inline-block;
			    padding: 3px;
			}
			p {
				width: 50%;
				margin: auto;
				text-align: center;
			}
			.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> 
		<div class="container">
			<h2>Freetuts.net hướng dẫn tạo các dấu mũi tên</h2>
		  	<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>
		</div>
    </body>
</html>