Question

我想实现以下目标：

正如你所看到的，有四个矩形，两侧都有歪斜，所以最终四个矩形可以连接成一个正方形。

我想让它变得动态，所以一个管道可以有一个，两个或没有倾斜的边。

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

<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

Answer 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

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

歪斜一边或多边

2 个答案: