如何实现如图所示的两个div分割？TailwindCSS及CSS方案

能否用TailwindCSS实现？ #

可以。TailwindCSS支持通过内联样式或自定义配置来实现这类分割效果，以下以常见的斜线分割为例（若你需要其他类型的分割，可调整对应参数）：

TailwindCSS 实现代码 #

内联样式写法（无需额外配置）

<div class="flex h-screen w-full">
  <div class="w-1/2 bg-blue-500" style="clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);"></div>
  <div class="w-1/2 bg-gray-800" style="clip-path: polygon(0 15%, 100% 0, 100% 100%, 0 100%);"></div>
</div>

自定义工具类写法（可复用样式）

先安装tailwindcss-clip-path插件：npm install tailwindcss-clip-path，然后在tailwind.config.js中添加配置：

module.exports = {
  content: ["./**/*.{html,js}"],
  theme: {
    extend: {
      clipPath: {
        'left-slice': 'polygon(0 0, 100% 0, 100% 85%, 0 100%)',
        'right-slice': 'polygon(0 15%, 100% 0, 100% 100%, 0 100%)',
      },
    },
  },
  plugins: [require('tailwindcss-clip-path')],
}

之后即可直接使用自定义类：

<div class="flex h-screen w-full">
  <div class="w-1/2 bg-blue-500 clip-path-left-slice"></div>
  <div class="w-1/2 bg-gray-800 clip-path-right-slice"></div>
</div>

普通CSS实现代码 #

以下是对应的纯CSS实现，逻辑与Tailwind版本一致：

HTML结构 #

<div class="split-container">
  <div class="split-left"></div>
  <div class="split-right"></div>
</div>

CSS样式 #

.split-container {
  display: flex;
  width: 100%;
  height: 100vh;
}

.split-left {
  width: 50%;
  background-color: #3b82f6;
  clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
}

.split-right {
  width: 50%;
  background-color: #1f2937;
  clip-path: polygon(0 15%, 100% 0, 100% 100%, 0 100%);
}

若你需要其他类型的分割效果，可替换对应属性：

• 实线分隔：给其中一个div添加border-right: 2px solid #fff
• 渐变分隔：新增一个小宽度的div，设置background: linear-gradient(...)作为分隔层

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