css如何让span使用旋转 transform: rotate(45deg) 后再从中间一分为二，只留左边部分

要在CSS中让`<span>`元素先进行45度旋转，然后看起来像是从中线分成两半，通常需要结合伪元素`::before`和`::after`以及绝对定位来实现这种效果。首先，设置旋转，然后创建两个伪元素分别放置在左边和右边，通过透明度和宽度控制视觉上的一分为二。

示例代码：

.span-element {
  position: relative; /* 确保元素可以设置绝对定位 */
  transform: rotate(45deg); /* 旋转45度 */
}

.span-element::before,
.span-element::after {
  content: ""; /* 创建空内容 */
  position: absolute;
  top: 0;
  width: 50%; /* 分割一半宽度 */
}

/* 让伪元素呈现左边的部分 */
.span-element::before {
  left: 0;
  background-color: transparent; /* 透明显示原背景色 */
  transition: opacity 0.3s; /* 添加平滑过渡效果 */
}

/* 右边部分设置透明度 */
.span-element::after {
  right: 0;
  background-color: rgba(255, 255, 255, 0); /* 设置透明白色，近似于隐藏 */
  opacity: 0; /* 初始时完全透明 */
}

/* 当鼠标悬停时，改变右边部分的透明度以模拟分割 */
.span-element:hover::after {
  opacity: 1; /* 变得稍微不透明，形成“切割”感 */
}