我正在尝试使用 css 创建如下所示的图标。但是,它看起来很艰难。
我试过了 this东西,但看起来不太好。
.schedule {
height: 10px;
width: 10px;
position: relative;
}
.oval {
height: 10px;
width: 10px;
background-color: #FDD13A;
border-radius: 50%;
}
.line {
box-sizing: border-box;
height: 5.97px;
width: 4.08px;
border: 2px solid #FFFFFF;
position: absolute;
top: 1.5px;
left: 4px;
}
<div class="schedule">
<div class="line"></div>
<div class="oval"></div>
</div>
如有任何帮助,我们将不胜感激。
最佳答案
使用 transform 和 position:absolute
做出响应
.cancelled {
height: 20px;
width: 20px;
position: relative;
background-color: #FDD13A;
border-radius: 50%;
}
.cancelled2 {
height: 500px;
width: 500px;
position: relative;
background-color: #FDD13A;
border-radius: 50%;
}
.line1 {
position:absolute;
width:10%;
height:40%;
top:10%;
left:45%;
background:#ffffff;}
.line2 {
position:absolute;
width:10%;
height:40%;
top:50%;
left:45%;
background:#ffffff;
transform:rotate(-45deg);
transform-origin: top left;
}
<div class="cancelled">
<div class="line1"></div>
<div class="line2"></div>
</div>
<div class="cancelled2">
<div class="line1"></div>
<div class="line2"></div>
</div>
关于html - 使用 CSS 的预定图标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58219244/