-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放在其他div上
- 7. 在div中放置div
- 8. 如何在另一個div上放置div？
- 9. 如何將div放置在另一個div上方？
- 10. 放置在DIV
- 11. 如何正確放置div？
- 12. 如何放置z-index div？
- 13. CSS：SVG放置在DIV
- 14. 無法在上一個div上放置div/ul
- 15. 如何在絕對div中將絕對div放置在底部
- 16. 將div拖放到div上
- 17. 在容器div內放置兩個div
- 18. CSS在div旁邊放置div
- 19. JQuery，如何在div中放置圖像？
- 20. 如何在div底部放置圖像？
- 21. 如何在div中放置圖像
- 22. 如何在html右側放置div
- 23. 如何在div中放置圖像？
- 24. 如何將子div垂直放置在父div的中心？
- 25. 如何在Google地圖DIV中放置DIV？
- 26. 如何在另一個div的底部放置Div？
- 27. 你如何在div中垂直居中放置一個div？
- 28. 如何在div標籤頂部放置div標籤
- 29. 我如何在父div和它的孩子之間放置div？
- 30. 如何在可動態更改的div中放置按鈕div？
我們不是免費的代碼編寫的服務。先嚐試一下並展示你的研究成果。 – Xufox
如果你想要這個想法，那麼這裏是：在元素上創建需要使用'border-radius：50％'的圓。第一個元素是大圓圈，周圍的「發光」可以用大圓圈的'：after'僞元素進行絕對定位。比你有4個更小的圓圈，你可以使用絕對定位的'：before'僞元素使它們成爲箭頭。 –
我將來會改進我的問題.. @Xufox –