CSS3在手掌中間繪制圓圈

Question

我不是CSS方面的佼佼者，並且正在尋找類似的方法：

我有一種感覺，我需要使用::after和content: ' '來實現這一點以及border-radius: 50%;

 .nav { position: fixed; left: 50%; } .nav::after { content: ' Hi '; background-color: rgba(0, 0, 0, 0.5) !important; box-shadow: 0px 1px 8px 1px #222222; border-bottom-left-radius: 50%; border-bottom-right-radius: 50%; position: fixed; height: 7.5em; width: 10em; transform: translateX(-50%); transform: translateY(40%); z-index: 2; } 

 <div class="nav"></div> 

Answer 1

我不相信您可以使用單個HTML元素來實現此效果。 檢查一下，但是：

 #outer { width: 300px; height: 225px; background-color:#ccc; position: relative; } #rounded, #leftbox, #rightbox { background-color: #000; opacity: .5; filter: alpha(opacity=50); position: absolute; top: 10px; } #rounded { width: 200px; height: 200px; border-bottom-left-radius: 50%; border-bottom-right-radius: 50%; left: 50px; } #leftbox, #rightbox { width: 50px; height: 100px; } #leftbox { left: 0; } #rightbox { right: 0; } 

 <div id='outer'> <div id='leftbox'></div> <div id='rounded'></div> <div id='rightbox'></div> </div> 

就個人而言，我將使用透明的Image overlay（用於向后兼容）代替此技術。