CSS 实现右下角斜切角效果 - 详细教程

CSS 实现右下角斜切角效果 - 详细教程

本文将介绍如何使用 CSS 代码，通过在元素的伪元素中添加 transform: skewX(-45deg) 属性来实现右下角斜切角的效果。

原始代码：

.test {
  width: 300px;
  height: 300px;
  background-color: springgreen;
  margin: 0 auto;
  box-shadow: inset 0px 0px 67px 37px #cccccc;
  /* 实现蒙蔽效果 */
  position: relative;
}

.test span:nth-child(1) {
  display: block;
  width: 50px;
  height: 50px;
  border-top: 3px solid #00d3e7;
  border-left: 3px solid #00d3e7;
  position: absolute;
}

.test span:nth-child(2) {
  display: block;
  width: 50px;
  height: 50px;
  border-top: 3px solid #00d3e7;
  border-right: 3px solid #00d3e7;
  position: absolute;
  right: 0;
  top: 0;
}

.test span:nth-child(3) {
  display: block;
  width: 50px;
  height: 50px;
  border-left: 3px solid #00d3e7;
  border-bottom: 3px solid #00d3e7;
  position: absolute;
  left: 0;
  bottom: 0;
}

.test span:nth-child(4) {
  display: block;
  width: 50px;
  height: 50px;
  border-right: 3px solid #00d3e7;
  border-bottom: 3px solid #00d3e7;
  position: absolute;
  right: 0;
  bottom: 0;
}

.test span:nth-child(4)::after {
  content: '';
  display: block;
  width: 50px;
  height: 50px;
  position: absolute;
  background-color: #fff;
  z-index: 10;
  border: 2px solid transparent;
  top: 26px;
  left: 26px;
  transform: rotate(45deg);
  border-left-color: yellow;
}

修改后的代码：

.test {
  width: 300px;
  height: 300px;
  background-color: springgreen;
  margin: 0 auto;
  box-shadow: inset 0px 0px 67px 37px #cccccc;
  /* 实现蒙蔽效果 */
  position: relative;
}

.test span:nth-child(1) {
  display: block;
  width: 50px;
  height: 50px;
  border-top: 3px solid #00d3e7;
  border-left: 3px solid #00d3e7;
  position: absolute;
}

.test span:nth-child(2) {
  display: block;
  width: 50px;
  height: 50px;
  border-top: 3px solid #00d3e7;
  border-right: 3px solid #00d3e7;
  position: absolute;
  right: 0;
  top: 0;
}

.test span:nth-child(3) {
  display: block;
  width: 50px;
  height: 50px;
  border-left: 3px solid #00d3e7;
  border-bottom: 3px solid #00d3e7;
  position: absolute;
  left: 0;
  bottom: 0;
}

.test span:nth-child(4) {
  display: block;
  width: 50px;
  height: 50px;
  border-right: 3px solid #00d3e7;
  border-bottom: 3px solid #00d3e7;
  position: absolute;
  right: 0;
  bottom: 0;
}

.test span:nth-child(4)::after {
  content: '';
  display: block;
  width: 50px;
  height: 50px;
  position: absolute;
  background-color: #fff;
  z-index: 10;
  border: 2px solid transparent;
  top: 26px;
  left: 26px;
  transform: rotate(45deg) skewX(-45deg);
  border-left-color: yellow;
}

通过在第 4 个 span 的 ::after 伪元素中添加 transform: skewX(-45deg);，即可实现右下角斜切角的效果。

解释：

• transform: skewX(-45deg); 表示将元素沿水平方向倾斜 45 度。负号表示倾斜方向为向左倾斜，从而实现右下角斜切的效果。

通过以上步骤，您就可以轻松地在 CSS 中实现右下角斜切角的效果。