<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML旋转例子</title>
<style type="text/css">
body{background-color: #000000}
div{
background-color: #F47F21;
position:fixed;
width: 250px;
height: 30px;
text-align: center;
}
#dv-top-left{
top: 50px;
left:-50px;
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
}
#dv-top-right{
right: -50px;
top: 50px;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
}
#dv-bottom-left{
left:-50px;
bottom: 50px;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
}
#dv-bottom-right{
right:-50px;
bottom: 50px;
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
}
</style>
</head>
<body>
<div id="dv-top-left">旋转例子</div>
<div id="dv-top-right">旋转例子</div>
<div id="dv-bottom-left">旋转例子</div>
<div id="dv-bottom-right">旋转例子</div>
</body>
</html>