尝试在 DIV 中使多边形响应

Question

我已经搜索了几个小时，但我似乎找不到解决我的问题的方法，我想制作一个三角形来响应它所在的 DIV，它还必须有div的全宽。 div 具有相对位置，但无论我尝试什么，多边形似乎总是溢出 div 或错位。

最终，响应式多边形必须位于 'something' 按钮上方，但让我们先尝试解决当前问题。

回顾：三角形需要响应主 div，因为它会改变大小而不会溢出或得到不同的形状，三角形必须是 div 宽度的 100%。

JSfiddle：https://jsfiddle.net/L8gv17c2/1/

HTML:

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

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:white;
        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%;
      height: 4px;
      position: absolute;
      left: 0;
      top: 0;
    }

Answer 1

在您的 .triangle class 中插入 100% 的高度，并放置 max-width 和 max-height 到你的 svg:

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

svg {
  max-width:100%;
  max-height: 100%;
}

Fiddle Here

Answer 2

我猜你正在寻找这个：

.triangle {
  width: 40%;
}

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

已更新 fiddle：https://jsfiddle.net/L8gv17c2/3/

只需更改父级的宽度即可调整 <svg> 的宽度（响应式）：https://jsfiddle.net/L8gv17c2/4/

尝试在 DIV 中使多边形响应

Trying to make a polygon responsive in DIV

html

css

svg

polygon

points