如何用CSS构建Civ？及侧边异形激活导航实现求助

Hey there! Let's break down your questions and get you sorted out:

First off, this style of sidebar with a curved, notched active state is commonly called a Curved Active State Sidebar (or sometimes a Notched Active Sidebar Navigation). That’s a solid term to use for your title!

Looking at your existing code, the notch positioning was a bit off—let’s tweak the pseudo-elements and refine the active state to get that clean, professional look you’re going for. Here’s the complete, adjusted implementation:

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
<nav class="w-32 h-64 bg-indigo-900 rounded-xl relative overflow-hidden">
  <div class="flex flex-col items-center justify-between h-full py-12">
    <div class="text-white font-medium">Title</div>
    <div class="w-full">
      <ul class="flex flex-col items-center space-y-12 w-full">
        <!-- Active Item -->
        <li class="w-full flex justify-center relative">
          <a href="#" class="active-link flex justify-center items-center bg-white border-none rounded-l-full w-16 h-8 text-black relative z-10">
            <i>Icon</i>
          </a>
          <!-- Top Notch -->
          <div class="absolute right-0 top-[-12px] w-6 h-6 bg-indigo-900 rounded-br-full"></div>
          <!-- Bottom Notch -->
          <div class="absolute right-0 bottom-[-12px] w-6 h-6 bg-indigo-900 rounded-tr-full"></div>
        </li>
        <!-- Inactive Item -->
        <li class="w-full flex justify-center">
          <a href="#" class="flex justify-center items-center text-white w-16 h-8">
            <i>Icon</i>
          </a>
        </li>
      </ul>
    </div>
    <div class="text-white">
      <i>Icon</i>
    </div>
  </div>
</nav>

<style>
/* Custom styles to complement Tailwind */
.active-link {
  border-top-left-radius: 10rem;
  border-bottom-left-radius: 10rem;
}
</style>

Key improvements here:

• Replaced the border-based notches with solid background divs that match the sidebar color—this creates a cleaner "cutout" effect
• Adjusted positioning of the notches to sit perfectly against the active item
• Added an inactive item example for contrast
• Cleaned up relative/absolute positioning to avoid z-index issues

Assuming you’re referring to building UI elements similar to the Civilization series of games (with that classic, warm, retro strategy-game aesthetic), here’s a quick breakdown of how to approach it:

• Base Layout: Use CSS Grid to split the screen into core sections: top status bar (for resources/turn count), left sidebar (for city/unit menus), and main map area.
• Color Palette: Stick to warm, earthy tones—deep browns, muted olive greens, parchment-like off-whites, and gold accents for highlights.
• Textures & Effects: Add subtle paper/parchment textures to background elements, and use drop shadows to give buttons/panels a raised, tactile feel.
• Button Styles: Create rounded, slightly beveled buttons with hover states that darken the color and increase shadow depth.

Here’s a quick example of a Civ-style resource panel:

<div class="bg-amber-50 bg-opacity-90 border-2 border-amber-800 rounded-lg p-4 shadow-lg max-w-xs">
  <h3 class="text-amber-900 font-bold border-b border-amber-700 pb-2">Resources</h3>
  <div class="flex justify-between mt-2">
    <span class="flex items-center">
      <span class="w-4 h-4 bg-yellow-500 rounded-full mr-2"></span> Gold: 450
    </span>
    <span class="flex items-center">
      <span class="w-4 h-4 bg-green-600 rounded-full mr-2"></span> Food: 22
    </span>
  </div>
</div>

This gives you that classic, warm strategy-game feel—you can expand on this by adding more panels, unit cards, and map elements!

内容的提问来源于stack exchange，提问作者Ezrab_