如何使用transform:skew获得完美的天际线？

Question

我想知道是否有可能使用transform:skew获得完美的边缘(我想附加一个img，但我不能(1分))

https://ibb.co/g5qODG (没有阴影的图像示例。它看起来仍然像是被咬了。)

目前，它看起来像是一张低分辨率的图像

请在下面找到我当前HTML的摘录。

​

/***UPS***/

.ups-container {
  z-index: 1;
  position: relative;
  color: #ffffff;
}

.ups-container h4 {
  font-size: 2em;
  letter-spacing: 0.01em;
  color: #ffffff;
  font-weight: 600;
  margin: 1rem 0;
  line-height: 1.2em;
  min-height: 76px;
}

.ups-container p {
  color: #c5b7d9;
  /*text-align: left;*/
}

.ups-container strong {
  color: #fff;
}

.skew:before {
  content: '';
  position: absolute;
  left: 0;
  top: -10vh;
  overflow: visible;
  width: 100%;
  height: 300px;
  background: #360d97;
  background-image: url("https://static.contrado.com/resources/images/2017-9/69479/bg-words-174927.png");
  background-image: url("https://static.contrado.com/resources/images/2017-9/69479/bg-words-174927.png"), linear-gradient(213deg, #360d97 42%, #79149e 89%);
  background-repeat: no-repeat;
  background-position: left bottom;
  z-index: -1;
  -webkit-transform: skewY(-5deg);
  -moz-transform: skewY(-5deg);
  -ms-transform: skewY(-5deg);
  -o-transform: skewY(-5deg);
  transform: skewY(-5deg);
  -webkit-backface-visibility: hidden;
  backface-visibility: initial;
  box-shadow: inset 0 -10px 7px rgba(0, 0, 0, 0.3), 0 -10px 14px 2px rgba(0, 0, 0, 0.3), 0 -4px 14px 3px rgba(0, 0, 0, 0.2);
}

<div class="wrapper-no-inner">
  <div class="ups-container">
    <div class="skew">
      <div class="row center-xxs ups-line-up ">

        Hola!

      </div>
    </div>
  </div>

​

Answer 1

你的代码很好，分辨率的问题是由于长方体的阴影造成的。我刚把它取下来，它看起来很好。我认为你必须从这个开始，如果你需要阴影，只需添加新的html标签并设计它们的样式，就可以获得你设计的功能：

​

/***UPS***/

.ups-container {
  z-index: 1;
  position: relative;
  color: #ffffff;
}

.ups-container h4 {
  font-size: 2em;
  letter-spacing: 0.01em;
  color: #ffffff;
  font-weight: 600;
  margin: 1rem 0;
  line-height: 1.2em;
  min-height: 76px;
}

.ups-container p {
  color: #c5b7d9;
  /*text-align: left;*/
}

.ups-container strong {
  color: #fff;
}

.skew:before {
  content: '';
  position: absolute;
  left: 0;
  top: -26px;
  width: 110%;
  height: 300px;
  background: #360d97;
  transform: skew(0,-5deg);
}

<div class="wrapper-no-inner">
  <div class="ups-container">
    <div class="skew">
      <div class="row center-xxs ups-line-up ">

        Hola!

      </div>
    </div>
  </div>

​