html - 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>

就我个人而言，为了向后兼容，我会使用透明图像叠加层来代替这种技术。