将多边形三角形与div的底部对齐(Align polygon triangle to bottom of div)

编程入门行业动态更新时间:2024-10-23 22:25:25
我有一个三角形多边形，但有一个问题，我想将它放在'onebysign'div的正上方，但定位不起作用，它也必须保持响应，所以当我改变屏幕大小时，多边形会停留在他的位置。
所以基本上：我想要多边形三角形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> 
  
 
I have a triangle polygon but there is a problem, I want to place it right above the 'onebysign' div but positioning is not working, it also has to stay responsive so when I change the screen size the polygon stays at his place. 
So basically: I want the polygon triangle div to 'connect' with the 'onebysign' (something) div, it has to stay responsive and not move when the screen width is changed. 
JSfiddle: https://jsfiddle.net/fmg6orkd/ 
HTML and 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> 
  
 

                最满意答案
                
                    
                         一个简单的解决方案是从svg中删除宽度/高度，并调整视框以覆盖多边形的所需部分，然后您可以轻松使用postioning：  
 
 
  
  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> 
  
 
A simple solution is to remove width/height from svg and adjust the viewbox to cover the needed part of the polygon, then you can easily use postioning: 
 
 
  
  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> 
  
 
 
Another solution is to use pseudo element with linear-gradient background in order to create the triangle and you will have less HTML code to manage: 
 
 
  
  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>