Question

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

最终响应多边形必须超过“某事”按钮，但我们首先尝试解决当前问题。

回顾：三角形需要响应主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 {
  width: 40%;
}

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

更新了小提琴：https://jsfiddle.net/L8gv17c2/3/

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

Answer 2

在 .triangle 类中插入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

试图在DIV中使多边形响应

2 个答案: