tree
我需要用6个徽标在这棵树周围做,我该怎么做?我如何做出弯曲的膨胀?
ty so utch all
请提供信息。添加边框半径以在CSS中给出弯曲的边缘与border-radius: 5px
一样容易,具体取决于您希望它的弯曲程度
这很难!不知道如何做出响应。但这是我的快速尝试:只使用Flexbox将球置于一条水平线,然后使用了绝对的位置和一些百分比的猜测来垂直定位球。
根据需要收紧,但我会等待另一种解决方案
.tree-balls {
width: 100%;
position: relative;
}
.tree-balls img {
width: 100%;
}
.ball-container {
width: 80%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: 0 auto;
display: flex;
justify-content: space-around;
align-items: center;
}
.ball {
display: block;
width: 30px;
height: 30px;
background-color: teal;
border-radius: 50%;
margin-bottom: 5%
}
.ball:first-of-type {
margin-left: 15%;
}
.ball:last-of-type {
margin-right: 15%;
}
.ball:nth-of-type(even) {
margin-bottom: 25%;
}
.ball:nth-of-type(3) {
margin-bottom: 35%;
}
<div class="tree-balls">
<img src="https://i.stack.imgur.com/ewaaS.jpg">
<div class="ball-container">
<span class="ball"></span>
<span class="ball"></span>
<span class="ball"></span>
<span class="ball"></span>
<span class="ball"></span>
</div>
</div>