CSS3在导航中间绘制圆圈

Question

我不是CSS中最伟大的人，我希望做这样的事情：

我有一种感觉，我需要使用::after和content: ' '来实现此目标以及border-radius: 50%;

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

我不相信您可以使用单个HTML元素来实现此效果。不过要看看这个：

＆＃13;

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

就个人而言，我会使用透明的图像叠加，以实现向后兼容，而不是使用此技术。