1
A
回答
3
可以使用僞元素來創建此,而是要創造完美的響應圈子,你可以同時height
和圓形的width
使用vh
單位。然後,您可以使用position: absolute
和transform: translate()
來定位僞元素。
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
margin: 0;
padding: 0;
}
.circle {
position: relative;
width: 60vh;
height: 60vh;
border-radius: 50%;
background: #E54B4B;
}
.circle:before,
.circle:after {
content: '';
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}
.circle:before {
transform: translate(-50%, -50%);
width: 100vw;
background: #B65657;
height: 20vh;
z-index: -1;
}
.circle:after {
height: 20vh;
width: 20vh;
background: white;
}
<div class="circle"></div>
+0
哦,從來沒有見過這種轉換。這就是我一直在尋找的。謝謝。 –
+0
不客氣。 –
相關問題
- 1. Div 100%頁面響應的高度
- 2. CSS響應圈
- 3. 使Div的高度響應
- 4. Div的高度響應
- 5. 響應頁面高度作爲div展開html css
- 6. 3個圓圈和響應
- 7. 響應div高度 - 引導
- 8. 使用jquery.css響應高度的div div
- 9. 製作響應高度CSS
- 10. 爲div設置相同的高度和響應度只有css
- 11. 圓圈鍵CSS
- 12. 用css創建一個帶圓圈的div裏面的箭頭
- 13. 響應式CSS將DIV與其他DIV高度對齊:auto
- 14. 響應圈(JavaScript的,HTML5,CSS)
- 15. 如何將圓圈後面的一行移至圓圈底部
- 16. jquery使div完全寬度和高度的頁面和響應
- 17. 調整div圓圈
- 18. 響應格做出來的圓圈
- 19. HTML - CSS /孩子如何使div的高度響應的父母
- 20. 通過CSS響應地設置div的高度
- 21. 調整隻用CSS(響應式設計)多個div的高度
- 22. 帶動態高度的CSS div來響應背景圖片
- 23. 製作響應屏幕寬度的圓圈
- 24. 設置固定div的高度(響應)
- 25. 的div元素響應高度
- 26. Android Asynctask在進度對話框後面顯示圓圈
- 27. 防止DIV高度影響下面
- 28. 如何使CSS的高度響應?
- 29. Swift動畫 - 按鈕後面的圓圈
- 30. CSS div 100%高度
可能。你有什麼嘗試?看看如何[創建一個最簡單的例子](http://stackoverflow.com/help/mcve) –