css平行四边形字不倾斜

在使用 CSS 进行网页布局时，经常需要使用平行四边形来美化页面。但是，当文字要放在平行四边形内时，常常会发现文字也跟着一起倾斜，影响阅读。下面就来介绍一下如何让平行四边形不影响文字倾斜。

code>
.parallelogram {
      width: 240px;
      height: 100px;
      position: relative;
      transform: skew(-20deg);
      margin: 20px;
}
.parallelogram:before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      transform: skew(20deg);
      background-color: #4CAF50;
      opacity: 0.7;
      z-index: -1;
}
.parallelogram p {
      position: absolute;
      top: 40%;
      left: 50%;
      transform: translate(-50%, -50%) skew(20deg);
      color: #fff;
      font-size: 20px;
      text-align: center;
      line-height: 1.5;
}
    /code>
    

这是一个典型的 CSS 平行四边形代码，但是注意到 .parallelogram p 选择器的核心是利用 transform 属性中的 skew 和 translate 函数来使文字回正。具体实现过程如下：

• 利用 transform: skew(-20deg); 对矩形进行倾斜，使其变成平行四边形。
• 使用 :before 伪元素在四边形上覆盖一层透明的背景色，让原来的实心变成描边，使得四边形更加突出。
• 将文字用 position: absolute; 定位到四边形内部，并将其向左上方移动一定的距离，使其有效避免与平行四边形形成倾斜。
• 利用 transform: translate(-50%, -50%) skew(20deg); 回正文字，让文字垂直于页面。

这样就能够实现文字与平行四边形分别倾斜，互相不影响，让页面更加美观大方。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！