CSS Responsive Triangle Width

问题

Simple question really, I want to know how I would make a triangles width (made in css with the below code) equal to the page width so when the browser resizes so does the triangle.

My Code, So far

.triangle {
    color: crimson;
    width: 0;
    height: 0;
    margin-top: 30%;
    border-top: 100px solid crimson;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
}

回答1:

.triangle {
    color: crimson;
    width: 0;
    height: 0;
    margin-top: 30%;
    border-top: 100px solid crimson;
    border-left: 50vw solid transparent; /* check border size here! */
    border-right: 50vw solid transparent; /* and here! */
}

Sample fiddle.

回答2:

Another option would be to use background liner gradients, and flex positioning to make sure that the triangle always scales to its parent container. No matter how wide or narrow you make that container, the triangle always scales with it. Here is the fiddle:

https://jsfiddle.net/29k4ngzr/

<div class="triangle-wrapper-100">
<div class="triangle-left"></div>
<div class="triangle-right"></div>
</div>

.triangle-wrapper-100 {
      width: 100%;
    height: 100px;
    display:flex;
    flex-direction: column;
    flex-wrap: wrap;
}
.triangle-right {
    right: 0px;
    background: linear-gradient(to right bottom, #6940B5 50%, transparent 50%);
    width: 50%;
    height: 100px;
}
.triangle-left {
    left: 0px;
    background: linear-gradient(to right bottom, #6940B5 50%, transparent 50%);
    width: 50%;
    height: 100px;
    transform: scaleX(-1);
}

来源：https://stackoverflow.com/questions/30932442/css-responsive-triangle-width

标签

html

css

css-shapes