-3
A
回答
0
好了，不带箭头的，但我认为这是一个良好的开端学习。
编辑：增加了一些箭头。
#bigGrayOneBox {
position: absolute;
}
#bigGrayOne {
width: 100px;
height: 100px;
background-color: #E9E9E9;
border-radius: 100%;
border: 10px solid white;
position: relative;
top: 100px;
}
#bigGrayOne:after {
border-radius: 100%;
position: absolute;
width: 118px;
height: 118px;
border: 1px solid #E9E9E9;
content: "";
z-index: 1;
top: -10px;
left: -10px;
}
#yellow,
#green,
#purple,
#blue {
width: 50px;
height: 50px;
border-radius: 100%;
position: absolute;
}
#yellow {
background-color: #E2A213;
top: 35px;
left: 100px;
}
#yellow::before {
content: '';
left: -18px;
top: 69px;
transform: rotate(-58deg);
width: 30px;
height: 5px;
display: block;
background-color: #E2A213;
position: absolute;
z-index: 1;
}
#yellow::after {
content: "";
transform: rotate(28deg);
border-color: transparent transparent #E2A213 transparent;
display: block;
border-width: 10px;
border-style: solid;
width: 0px;
position: absolute;
top: 43px;
left: -2px;
}
#green {
background-color: #00A19A;
top: 100px;
left: 160px;
}
#green::before {
content: '';
left: -43px;
top: 40px;
transform: rotate(-18deg);
width: 30px;
height: 5px;
display: block;
background-color: #00A19A;
position: absolute;
z-index: 1;
}
#green::after {
content: "";
transform: rotate(73deg);
border-color: transparent transparent #00A19A transparent;
display: block;
border-width: 10px;
border-style: solid;
width: 0px;
position: absolute;
top: 25px;
left: -15px;
}
#purple {
background-color: #D63080;
top: 180px;
left: 160px;
}
#purple::before {
content: '';
left: -41px;
top: 5px;
transform: rotate(19deg);
width: 30px;
height: 5px;
display: block;
background-color: #D63080;
position: absolute;
z-index: 1;
}
#purple::after {
content: "";
transform: rotate(107deg);
border-color: transparent transparent #D63080 transparent;
display: block;
border-width: 10px;
border-style: solid;
width: 0px;
position: absolute;
top: 6px;
left: -13px;
}
#blue {
background-color: #173DC6;
top: 245px;
left: 105px;
}
#blue::before {
content: '';
left: -16px;
top: -22px;
transform: rotate(61deg);
width: 30px;
height: 5px;
display: block;
background-color: #173DC6;
position: absolute;
z-index: 1;
}
#blue::after {
content: "";
transform: rotate(148deg);
border-color: transparent transparent #173DC6 transparent;
display: block;
border-width: 10px;
border-style: solid;
width: 0px;
position: absolute;
top: -8px;
left: 1px;
}<div id="bigGrayOneBox">
<div id="bigGrayOne">
</div>
</div>
<div id="yellow">
</div>
<div id="green">
</div>
<div id="purple">
</div>
<div id="blue">
</div>+0
谢谢帕特里克。但我已经尝试过，像大灰色的那个不是绝对的定位。 –
+0
@JeevaJsb我编辑它，现在位置：absoulte，它有一些箭头。 –
+0
感谢您的帮助。 –
1
为了让你和你的想法，即使你应该自己尝试过的东西。
什么仍然有许多工作要做设置所有箭头的志愿服务岗位...
.wrap {
position: relative;
}
.wrap > div {
position: absolute;
width: 90px;
height: 90px;
background-color: #AFAFAF;
border-radius: 50%;
}
.wrap > div.gray {
position: absolute;
top: 100px;
left: 50px;
width: 200px;
height: 200px;
background-color: #CFCFCF;
}
.wrap > div.gray:before {
position: relative;
top: -20px;
left: -20px;
content: '';
display: block;
width: 200px;
height: 200px;
border-radius: 50%;
z-index: -1;
border: solid 1px #CFCFCF;
padding: 20px;
}
.wrap > div.orange {
background-color: orange;
top: 0px;
left: 200px;
}
.wrap > div.green {
background-color: green;
top: 80px;
left: 270px;
}
.wrap > div.purple {
background-color: purple;
top: 180px;
left: 290px;
}
.wrap > div.blue {
background-color: blue;
top: 290px;
left: 290px;
}
/* arrows */
.wrap > div:not(.gray):before {
position: absolute;
left: -40px;
top: 60%;
content: '';
display: inline-block;
width: 30px;
height: 3px;
background-color: inherit;
}
.wrap > div:not(.gray):after {
position: absolute;
content: '';
display: block;
width: 0;
height: 0;
border-style: solid;
border-width: 0 10px 10px 10px;
border-color: transparent transparent fuchsia transparent;
}
.wrap > div.orange:before {
left: -40px;
top: 100%;
transform: rotate(-40deg);
}
.wrap > div.orange:after {
left: -20px;
top: 75px;
transform: rotate(44deg);
border-color: transparent transparent orange transparent;
}
.wrap > div.green:before {
/* needs position and transform */
/* see .wrap > div.orange:before {} */
}
.wrap > div.green:after {
/* needs position, transform and border-color */
/* see .wrap > div.orange:after {} */
}
.wrap > div.purple:before {
/* needs position and transform */
/* see .wrap > div.orange:before {} */
}
.wrap > div.purple:after {
/* needs position, transform and border-color */
/* see .wrap > div.orange:after {} */
}
.wrap > div.blue:before {
/* needs position and transform */
/* see .wrap > div.orange:before {} */
}
.wrap > div.blue:after {
/* needs position, transform and border-color */
/* see .wrap > div.orange:after {} */
}<div class="wrap">
<div class="gray"></div>
<div class="orange"></div>
<div class="green"></div>
<div class="purple"></div>
<div class="blue"></div>
</div>+1
谢谢...... –
相关问题
- 1. 在另一个div上放置div
- 2. 麻烦在Div上放置Div
- 3. 无法在其他div上放置div
- 4. 如何将div放在其他div上
- 5. 在div中放置div
- 6. 放置在DIV
- 7. 如何放置z-index div？
- 8. 如何正确放置div？
- 9. 如何在绝对div中将绝对div放置在底部
- 10. 将div拖放到div上
- 11. CSS在div旁边放置div
- 12. 如何在div中放置图像
- 13. 把div放在另一个div上面
- 14. 如何在两个div之间放置两个div
- 15. 如何在div标签顶部放置div标签
- 16. 如何在另一个div的底部放置Div？
- 17. 在Google地球上放置透明DIV
- 18. 在所有内容上放置div
- 19. 在div上面放置一个图像
- 20. div层应放置在Flash电影上
- 21. 如何在div上缩放边框？
- 22. 如何把DIV放在FRAMESET上？
- 23. 如何将div放在CSS上？
- 24. 你如何在页面上水平居中放置一个div（带有子div）？
- 25. 如何将div放在另一个div上而不使用绝对位置？
- 26. 放置DIV在asp.net MVC 3
- 27. 在Div中放置图像
- 28. 并排放置div
- 29. HTML/CSS Div放置
- 30. 如何在包装div上放置保证金？
我们不是免费的代码编写的服务。先尝试一下并展示你的研究成果。 – Xufox
如果你想要这个想法，那么这里是：在元素上创建需要使用'border-radius：50％'的圆。第一个元素是大圆圈，周围的“发光”可以用大圆圈的'：after'伪元素进行绝对定位。比你有4个更小的圆圈，你可以使用绝对定位的'：before'伪元素使它们成为箭头。 –
我将来会改进我的问题.. @Xufox –