CSS 控制按钮

Question

我需要设计4个这样的按钮。考虑侧面和按钮侧面是实心的。

设计类似于切披萨：

.container {
    border-radius:50%;
    overflow: hidden;
}

.child {
  /*
  How to give buttons desired shapes? Maybe using skew? I am not able doing it.
   */
}

Answer 1

我使用 Tailwindcss 创建了这个，转换为普通 CSS 应该不难。 看看 - https://play.tailwindcss.com/AvNKHh64Nu。 如果您喜欢使用 Tailwinds 的 Playground，我还将包含代码。

<div class="flex h-screen w-screen items-center justify-center">
  <div class="relative size-56 overflow-hidden rounded-full bg-gray-300">
    <button class="absolute -top-6 left-14 size-28 rotate-45 bg-red-500 transition hover:bg-red-600 active:bg-red-400" title="you are hovering red"></button>
    <button class="absolute -right-6 top-14 size-28 rotate-45 bg-blue-500 transition hover:bg-blue-600 active:bg-blue-400" title="you are hovering blue"></button>
    <button class="absolute -bottom-6 left-14 size-28 rotate-45 bg-yellow-500 transition hover:bg-yellow-600 active:bg-yellow-400" title="you are hovering yellow"></button>
    <button class="absolute -left-6 top-14 size-28 rotate-45 bg-green-500 transition hover:bg-green-600 active:bg-green-400" title="you are hovering green"></button>
  </div>
</div>

最终结果预览（显然可以更改颜色、尺寸等以匹配您的设计，这只是如何生成您的请求的总体思路）。