极客观点
项目管理
HarmonyOS
在学习CSS的过程中遇到以下问题：
蓝色箭头所指的白色小箭头是向右的，我想把它旋转到向下，这个应该怎么做呢？
附上代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景颜色</title>
<style>
#nav {
width: 230px;
background-color: #D7D7D7;
}
.title {
background-color: #C00;
font-size: 18px;
font-weight: bold;
color: #FFF;
text-indent: 1em;
line-height: 35px;
background-image: url("bg.png");
background-repeat: no-repeat;
background-position: 205px 10px;
}
#nav ul li {
height: 30px;
line-height: 25px;
list-style: none;
background-image: url("bg.png");
background-repeat: no-repeat;
background-position: 170px 2px;
}
a {text-decoration: none}
</style>
</head>
<body>
<div id="nav">
<h2 class="title">全部商品分类</h2>
<ul>
<li>
<a href="">图书</a> <a href="">音像</a> <a href="">数字商品</a>
</li>
<li>
<a href="">家用电器</a> <a href="">手机</a> <a href="">数码</a>
</li>
<li>
<a href="">电脑</a> <a href="">办公</a>
</li>
<li>
<a href="">家居</a> <a href="">家装</a> <a href="">厨具</a>
</li>
<li>
<a href="">服饰鞋帽</a> <a href="">个护化妆</a>
</li>
<li>
<a href="">礼帽箱包</a> <a href="">钟表</a> <a href="">珠宝</a>
</li>
<li>
<a href="">食品饮料</a> <a href="">保健食品</a>
</li>
<li>
<a href="">彩票</a> <a href="">旅行</a> <a href="">充值</a> <a href="">票务</a>
</li>
</ul>
</div>
</body>
</html>如果是用transform:rotate，只能把整个标题块旋转过来，问题是我只想转这个小箭头
把这个箭头放在一个标签里，常用的是i标签或span，然后旋转这个标签，像这种小图标可以不用图片的