如何用CSS创建带分离边框的45度倾斜正方形并完美居中文字？

嘿，这个需求我熟！倾斜45度的正方形+分离式边框+文字完美居中，用CSS就能轻松实现，我给你拆解下具体做法：

• 倾斜效果：用transform: rotate(45deg)给元素旋转，但要注意文字不能跟着转，所以文字容器要反向旋转回来
• 分离式边框：不用原生的border（因为旋转后边框会和元素贴在一起），而是用伪元素做一个单独的边框层，通过偏移位置和内容层拉开距离
• 文字居中：用Flex布局让文字在容器内水平垂直居中，再配合反向旋转保证文字方向正确

先上简洁的HTML结构：

<div class="tilted-square">
  <span class="square-text">我是居中文字</span>
</div>

再看核心CSS实现：

/* 外层定位容器，用来承载伪元素和文字 */
.tilted-square {
  position: relative;
  width: 200px; /* 正方形的基础边长 */
  height: 200px;
  margin: 100px auto; /* 让整体在页面居中，方便预览 */
}

/* 分离式边框层 */
.tilted-square::before {
  content: '';
  position: absolute;
  top: -12px; /* 控制边框和内容的上下间距 */
  left: -12px; /* 控制边框和内容的左右间距 */
  width: 100%;
  height: 100%;
  border: 2px solid #3498db; /* 自定义边框的粗细、颜色 */
  transform: rotate(45deg); /* 和内容层同步旋转45度 */
  z-index: 0; /* 让边框层在最下方 */
}

/* 内部正方形背景层 */
.tilted-square::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ffffff; /* 正方形的背景色 */
  transform: rotate(45deg); /* 旋转成倾斜正方形 */
  z-index: 1; /* 背景层在边框之上、文字之下 */
}

/* 文字容器 */
.square-text {
  position: relative;
  z-index: 2; /* 让文字在最上层不被遮挡 */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  transform: rotate(-45deg); /* 反向旋转，让文字变回水平方向 */
  font-size: 16px;
  font-weight: 600;
  color: #2c3e50;
}

• 调整分离距离：修改.tilted-square::before的top和left值，数值越大，边框和内容的分离感越强
• 自定义样式：可以随意修改边框的border-style（比如改成dashed虚线）、背景色、文字大小颜色等
• 适配不同尺寸：只要保持.tilted-square的宽高相等，就能始终是正方形，旋转后也不会变形
• 层级控制：通过z-index确保边框在最底层，背景在中间，文字在最上层，避免遮挡问题

你可以直接复制代码测试，根据自己的需求调整参数就行~

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