我正在尝试制作一个模拟时钟，但是是方形的。问题是创建箭头。我根本无法创建箭头。
#card7 {
width: 500px;
height: 500px;
background-color: #C4C4C4;
position: absolute;
left: 0;
top: 0;
display: block;
}
.line {
width: 100%;
height: 35px;
background-color: #0000AA;
font-size: 20px;
display: flex;
}
.turn {
width: 40px;
height: 35px;
background-color: #C4C4C4;
text-align: center;
flex-direction: column;
justify-content: center;
border: 2px solid Black;
display: flex;
}
.title {
flex-direction: column;
justify-content: center;
width: 100%;
text-align: center;
color: #fff;
display: flex;
}
.close {
width: 40px;
height: 35px;
background-color: #C4C4C4;
text-align: center;
flex-direction: column;
justify-content: center;
border: 2px solid Black;
display: flex;
box-shadow: inset 2px 2px 0px 0px #FFFFFF, inset -3px -3px 0px 0px #939393;
}
#clockFace {
width: 490px;
height: 460px;
margin: 7px 5px;
background-color: #C4C4C4;
box-shadow: inset 0px 0px 0px 8px rgba(255, 0, 0, 1), 0px 0px 0px 5px rgba(149, 1, 1, 1), inset 0px 0px 0px 15px rgba(149, 1, 1, 1);
border-radius: 5px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
#clockFace::before {
content: '';
position: absolute;
width: 8px;
height: 8px;
text-align: center;
background: #000;
}
#clockFace div {
position: absolute;
inset: 20px;
text-align: center;
display: inline-block;
transform: rotate(calc(30deg * var(--i)));
}
#clockFace div p {
display: inline-block;
transform: rotate(calc(-30deg * var(--i)));
}
.hour-hand {
width: 8px;
height: 20px;
background: seagreen;
}
.minute-hand {
width: 8px;
height: 140px;
background: seagreen;
}
.second-hand {
width: 8px;
height: 160px;
background: seagreen;
}
.hour-hand,
.minute-hand,
.second-hand {
position: absolute;
bottom: 50%;
left: 50%;
transform: translate(-50%, -50%);
}<div id="card7">
<div class="line">
<div class="turn">➖</div>
<p class="title">Часы</p>
<div class="close">▲</div>
</div>
<!--Часы-->
<div id="clockFace">
<div style="--i:1;">
<p>1</p>
</div>
<div style="--i:2;">
<p>2</p>
</div>
<div style="--i:3;">
<p>3</p>
</div>
<div style="--i:4;">
<p>4</p>
</div>
<div style="--i:5;">
<p>5</p>
</div>
<div style="--i:6;">
<p>6</p>
</div>
<div style="--i:7;">
<p>7</p>
</div>
<div style="--i:8;">
<p>8</p>
</div>
<div style="--i:9;">
<p>9</p>
</div>
<div style="--i:10;">
<p>10</p>
</div>
<div style="--i:11;">
<p>11</p>
</div>
<div style="--i:12;">
<p>12</p>
</div>
<div class="hour-hand"></div>
<div class="minute-hand"></div>
<div class="second-hand"></div>
</div>
</div>到目前为止，这是结果：
选择器
#clockFace div会覆盖箭头类的特殊性，因此它们的设置将被忽略。作为解决方案，您可以
例如：让我们为负责存储小时标记的div添加一个类，选择器将
#clockFace div变成常规类选择器，并且不会影响箭头元素。此外，箭头本身的位置并不完全正确。由于缩进是从下方考虑的，因此无需在变换中将它们抬高。