html - 将多边形三 Angular 形与 div 的底部对齐

Question

我有一个三 Angular 形多边形，但有一个问题，我想将它放在 'onebysign' div 的正上方，但定位不起作用，它还必须保持响应，所以当我更改屏幕大小时，多边形保持在他的位置地方。

所以基本上:我希望多边形三 Angular 形 div 与“onebysign”(某物)div“连接”，它必须保持响应并且在屏幕宽度更改时不会移动。

JSfiddle:https://jsfiddle.net/fmg6orkd/

HTML 和 CSS:

body {
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  background-color: #f2f2f2;
}

.events {
  padding: 20px 100px;
}

.textInfo {
  text-transform: uppercase;
  font-weight: 600;
  color: #085DAD;
  padding: 10px;
  background-color: white;
}

.onebyone {
  background-color: grey;
  width: 100%;
  padding-top: 100%;
  /* 1:1 Aspect Ratio */
  position: relative;
  /* If you want text inside of it */
  background-size: cover;
}

.onebytext {
  position: absolute;
  top: 10px;
  left: 0;
  bottom: 0;
  right: 0;
  text-align: center;
  font-size: 32px;
  color: white;
  width: 90%;
  left: 5%;
}

.onebysign {
  position: absolute;
  left: 0;
  bottom: 0px;
  right: 0;
  text-align: center;
  font-size: 20px;
  background-color: red;
  font-size: 24px;
}

.onebytext,
.onebysign {
  position: absolute;
  text-align: center;
  color: white;
}

.submitBtn {
  background-color: #0099CC;
  text-transform: uppercase;
  padding: 10px;
  border-radius: 50px;
  border: 0px;
  width: 70%;
  margin: 10px 0;
}

.triangle {
  width: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
}

svg {
  width: 100%;
  height: auto;
}

<div class="row events">
  <div class="onebyone">
    <div class="onebytext">
      <div class="textInfo">Test</div>
    </div>
    <div class="triangle" data-type="vertical_parallax" data-speed="2">
      <svg x="0px" y="0px" width="410" height="410" viewBox="0 0 310 310">
                <polyline fill="#CC0000" points="0,0 0,20 310,20" />
              </svg>
    </div>
    <div class="onebysign">
      <button class="submitBtn">Something</button>
    </div>
  </div>
</div>

Answer 1

一个简单的解决方案是从 svg 中删除宽度/高度并调整 View 框以覆盖多边形的所需部分，然后您可以轻松地使用定位:

body {
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  background-color: #f2f2f2;
}

.events {
  padding: 20px 100px;
}

.textInfo {
  text-transform: uppercase;
  font-weight: 600;
  color: #085DAD;
  padding: 10px;
  background-color: white;
}

.onebyone {
  background-color: grey;
  width: 100%;
  padding-top: 100%;
  /* 1:1 Aspect Ratio */
  position: relative;
  /* If you want text inside of it */
  background-size: cover;
}

.onebytext {
  position: absolute;
  top: 10px;
  left: 0;
  bottom: 0;
  right: 0;
  text-align: center;
  font-size: 32px;
  color: white;
  width: 90%;
  left: 5%;
}

.onebysign {
  position: absolute;
  left: 0;
  bottom: 0px;
  right: 0;
  text-align: center;
  font-size: 20px;
  background-color: red;
  font-size: 24px;
}

.onebytext,
.onebysign {
  position: absolute;
  text-align: center;
  color: white;
}

.submitBtn {
  background-color: #0099CC;
  text-transform: uppercase;
  padding: 10px;
  border-radius: 50px;
  border: 0px;
  width: 70%;
  margin: 10px 0;
}

.triangle {
  width: 100%;
  position: absolute;
  left: 0px;
  bottom: 51px;
}

svg {
  width: 100%;
  height: auto;
}

<div class="row events">
  <div class="onebyone">
    <div class="onebytext">
      <div class="textInfo">Test</div>
    </div>
    <div class="triangle" data-type="vertical_parallax" data-speed="2">
      <svg x="0px" y="0px" viewBox="0 0 310 20">
                <polyline fill="#CC0000" points="0,0 0,20 310,20" />
              </svg>
    </div>
    <div class="onebysign">
      <button class="submitBtn">Something</button>
    </div>
  </div>
</div>

另一种解决方案是使用具有线性渐变背景的伪元素来创建三 Angular 形，这样您就可以管理更少的 HTML 代码:

body {
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  background-color: #f2f2f2;
}

.events {
  padding: 20px 100px;
}

.textInfo {
  text-transform: uppercase;
  font-weight: 600;
  color: #085DAD;
  padding: 10px;
  background-color: white;
}

.onebyone {
  background-color: grey;
  width: 100%;
  padding-top: 100%;
  /* 1:1 Aspect Ratio */
  position: relative;
  /* If you want text inside of it */
  background-size: cover;
}

.onebytext {
  position: absolute;
  top: 10px;
  left: 0;
  bottom: 0;
  right: 0;
  text-align: center;
  font-size: 32px;
  color: white;
  width: 90%;
  left: 5%;
}

.onebysign {
  position: absolute;
  left: 0;
  bottom: 0px;
  right: 0;
  text-align: center;
  font-size: 20px;
  background-color: red;
  font-size: 24px;
}

.onebytext,
.onebysign {
  position: absolute;
  text-align: center;
  color: white;
}

.submitBtn {
  background-color: #0099CC;
  text-transform: uppercase;
  padding: 10px;
  border-radius: 50px;
  border: 0px;
  width: 70%;
  margin: 10px 0;
}

.onebysign:before {
    content: "";
    height: 30px;
    width: 100%;
    position: absolute;
    background: linear-gradient(to top right, red 47%, transparent 50%);
    left: 0;
    top: -30px;
}

<div class="row events">
  <div class="onebyone">
    <div class="onebytext">
      <div class="textInfo">Test</div>
    </div>
    <div class="onebysign">
      <button class="submitBtn">Something</button>
    </div>
  </div>
</div>