css - 如何使用变换 :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

你的代码很好，分辨率的问题是由于 box-shadow 造成的。我刚刚删除它，它看起来不错。我认为你必须从这里开始，如果你需要阴影，只需添加新的 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>