在一侧或更多侧倾斜答案

【问题标题】：Skew on one side or more在一侧或更多侧倾斜
【发布时间】：2018-10-02 15:34:15
【问题描述】：

我想实现以下目标：

如您所见，有四个矩形的边都应用了倾斜，因此最终可以将四个矩形连接起来形成一个正方形。

我想让它动态化，所以一根管道可以有一个、两个或不倾斜的侧面。

这是我对这个问题的看法：

<div>
  <div class="v vr">
    <div class="pipe">
    </div>
  </div>

    <div class="v vl">
    <div class="pipe">
    </div>
  </div>

  <div class="h ht hle hre">
    <div class="pipe">
    </div>
  </div>


  <div class="h hb">
    <div class="pipe">
    </div>
  </div>

</div>

这里是 CSS：

    .pipe {
  position: relative;
  width: 100%;
  border: none;
  display: inline-block;
  height: 100%;
  padding: 0px;
  margin: 0 1px;
  background: linear-gradient(#737373 30%, #cccccc 50%, #737373 70%);
}
.v .pipe {
   background:  linear-gradient(to right, #737373 30%, #cccccc 50%, #737373 70%)
}

.vr{
      min-width: 15px;
    min-height: 250px;
    position: absolute;
    z-index: 10014;
    top: 380px;
    left: 840px;
    width: 15px;
    height: 250px;
}

.ht{
      min-width: 250px;
    min-height: 15px;
    position: absolute;
    z-index: 10017;
    top: 355px;
    left: 585px;
    width: 250px;
    height: 15px;
  transform: rotate(90);
}


.hb{
      min-width: 250px;
    min-height: 15px;
    position: absolute;
    z-index: 10017;
    top: 630px;
    left: 585px;
    width: 250px;
    height: 15px;
  transform: rotate(90);
}

.vl{
      min-width: 15px;
    min-height: 250px;
    position: absolute;
    z-index: 10014;
    top: 380px;
    left: 560px;
    width: 15px;
    height: 250px;
}


.ht.hle .pipe:first-child:after {
    content: " ";
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 999999999;
    background: linear-gradient(#737373 30%, #cccccc 50%, #737373 70%);
    transform-origin: bottom left;
    -ms-transform: skew(50deg,0deg);
    -webkit-transform: skew(50deg,0deg);
    transform: skew(50deg);
}

.ht.hre .pipe:nth-child(1):before {
  content: " ";
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 999999999;
  background: linear-gradient(#737373 30%, #cccccc 50%, #737373 70%);
  transform-origin: left bottom;
  -ms-transform: skew(28deg,0deg);
  -webkit-transform: skew(28deg,0deg);
  transform: skew(-50deg);
  //background: white;
}

https://codepen.io/HMubaireek/pen/odjWJE

【问题讨论】：

所以不是编码机器，请向我们展示您的代码
好好想想，也许你想要别的东西？
@לבנימלכה 这里是：codepen.io/HMubaireek/pen/odjWJE
@TemaniAfif 我想到了 SVG，我认为 CSS 会更容易。

标签： html css svg sass

【解决方案1】：

这是我对我的问题的回答：

HTML：

<div>
  <div class="v vr  vtre vbre">
    <div class="pipe">
    </div>
  </div>

    <div class="v vl vtle vble">
    <div class="pipe">
    </div>
  </div>

  <div class="h ht hlte hrte">
    <div class="pipe">
    </div>
  </div>

  <div class="h hb hlbe hrbe">
    <div class="pipe">
    </div>
  </div>

</div>

CSS：

.pipe {
  position: relative;
  width: 100%;
  border: none;
  display: inline-block;
  height: 100%;
  padding: 0px;
  margin: 0 1px;
  background: linear-gradient(#737373 30%, #cccccc 50%, #737373 70%);
}
.v .pipe {
  background: linear-gradient(to right, #737373 30%, #cccccc 50%, #737373 70%);
}

.vr {
  min-width: 15px;
  min-height: 250px;
  position: absolute;
  top: 380px;
  left: 840px;
  width: 15px;
  height: 250px;
}

.ht {
  min-width: 250px;
  min-height: 15px;
  position: absolute;
  top: 355px;
  left: 585px;
  width: 250px;
  height: 15px;
}

.hb {
  min-width: 250px;
  min-height: 15px;
  position: absolute;
  top: 640px;
  left: 585px;
  width: 250px;
  height: 15px;
}

.vl {
  min-width: 15px;
  min-height: 250px;
  position: absolute;
  top: 380px;
  left: 560px;
  width: 15px;
  height: 250px;
}

.hlte .pipe:first-child:after {
  content: " ";
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: linear-gradient(#737373 30%, #cccccc 50%, #737373 70%);
  transform-origin: bottom left;
  -ms-transform: skew(50deg, 0deg);
  -webkit-transform: skew(50deg, 0deg);
  transform: skew(50deg);
}

.hrte .pipe:nth-child(1):before {
  content: " ";
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: linear-gradient(#737373 30%, #cccccc 50%, #737373 70%);
  transform-origin: left bottom;
  -ms-transform: skew(28deg, 0deg);
  -webkit-transform: skew(28deg, 0deg);
  transform: skew(-50deg);
}

.hlbe .pipe:first-child:after {
  content: " ";
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: linear-gradient(#737373 30%, #cccccc 50%, #737373 70%);
  transform-origin: top left;
  -ms-transform: skew(50deg, 0deg);
  -webkit-transform: skew(50deg, 0deg);
  transform: skew(-50deg);
}

.hrbe .pipe:nth-child(1):before {
  content: " ";
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: linear-gradient(#737373 30%, #cccccc 50%, #737373 70%);
  transform-origin: top left;
  -ms-transform: skew(28deg, 0deg);
  -webkit-transform: skew(28deg, 0deg);
  transform: skew(50deg);
}

.vbre .pipe:first-child:after {
  content: " ";
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: linear-gradient(to right, #737373 30%, #cccccc 50%, #737373 70%);
  transform-origin: left bottom;
  -ms-transform: skewY(50deg, 0deg);
  -webkit-transform: skewY(50deg, 0deg);
  transform: skewY(50deg);
}

.vble .pipe:first-child:after {
  content: " ";
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: linear-gradient(to right, #737373 30%, #cccccc 50%, #737373 70%);
  transform-origin: bottom right;
  -ms-transform: skewY(50deg, 0deg);
  -webkit-transform: skewY(50deg, 0deg);
  transform: skewY(-50deg);
}

.vtre .pipe:nth-child(1):before {
  content: " ";
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: linear-gradient(to right, #737373 30%, #cccccc 50%, #737373 70%);
  transform-origin: top left;
  -ms-transform: skewY(50deg, 0deg);
  -webkit-transform: skewY(50deg, 0deg);
  transform: skewY(-50deg);
  //background: white;
}

.vtle .pipe:nth-child(1):before {
  content: " ";
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: linear-gradient(to right, #737373 30%, #cccccc 50%, #737373 70%);
  transform-origin: bottom right;
  -ms-transform: skewY(50deg, 0deg);
  -webkit-transform: skewY(50deg, 0deg);
  transform: skewY(50deg);
}

https://codepen.io/HMubaireek/pen/odjWJE

上述代码的唯一问题是，如果将其放在溢出设置为隐藏的容器中，则不会出现倾斜。我可以设置宽度和边距，但我追求的是更动态的方式。

注意：过段时间我不会将其设置为接受的答案，也许会引入更好/更短的答案。

编辑：这是一个更简洁的 SCSS 版本：

https://codepen.io/HMubaireek/pen/jxbgqG?editors=1100

【讨论】：

【解决方案2】：

您可以利用 CSS 中的 borders work 方式：

.pipe {
  height: 100px;
  border: solid 6px transparent;
  border-left: solid 6px gray;
}

&lt;div class="pipe"&gt;&lt;/div&gt;

不幸的是，没有广泛支持的方式在 CSS 边框中应用渐变。但是您可以将自己喜欢的渐变保存为.png，然后使用border-image property 来创建金属效果。

【讨论】：

我想知道投反对票的原因是什么。我知道回答被否决的问题不是一个好习惯，但我有一个快速的答案，我花时间把它写下来，因为它对其他搜索类似问题的人也很有用。这不是一个公平的行为
I know it's not a good practice to answer downvoted --> 你完全错了，我们可以回答被否决的问题，我们可以得到赞成并接受。我可以给你 3 个拒绝投票的理由 1）你没有以任何方式回答这个问题，他询问了一种动态方式来获得 1,2 或 0 倾斜部分（我只看到你在这里有 2 个倾斜部分）2）你写错了，我们可以使用带有css边框的渐变，它们得到了很好的支持 3）你建议他使用PNG作为渐变，那么为什么不简单地在PNG中创建整个形状呢？ ...而且你只得到 1 次反对票，所以还不错。
第四个重要原因，我们不会以 0 的努力回答过于宽泛的问题，我们会标记、投反对票和/或发表评论。所以我们不赞成这样的答案，以阻止他们，也阻止这样的问题。 SO 不是免费的编码网站或教程网站
我觉得你不太好。 1）我的回答可以被认为是部分的，我知道，但是用户问的真的很复杂，我提供的只是一个很好的输入 2）不支持渐变边框，我花时间让它工作，但没有办法.特别是当其中一些必须是透明的时。如果您愿意，请提供一个可行的示例，我会相信您。 3）您不能动态地将高度或倾斜/不倾斜设置为静态 png 图像。所以这不是一个解决方案。我提供的是一个部分解决方案，可以很容易地扩展到用户想要的东西
I think you're not being nice --> 你问原因，我给你4，那为什么不好呢？你得到了 1 票反对，那有什么问题呢？如果您对自己的回答深信不疑，您可能会被 OP 投票赞成而不接受。为什么要高度重视一张孤立的投票？