Question

我有一个三角形多边形，但有一个问题，我想把它放在＆＃39; onebysign＆＃39; div但定位不起作用，它也必须保持响应，所以当我改变屏幕大小时，多边形停留在他的位置。

所以基本上：我希望多边形三角形div能够连接到＆＃39;与'onebysign＆＃39; （某事）div，它必须保持响应，而不是在屏幕宽度改变时移动。

HTML和CSS：

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 1

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

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>

另一个解决方案是使用具有线性渐变背景的伪元素来创建三角形，并且您将需要管理的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>

将多边形三角形对齐到div的底部

1 个答案: