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>

如何使用变换获得完美的天际线：倾斜？

1 个答案: