如何正确缩放三角形 div 背景？

Question

我想弄清楚如何缩放具有三角形背景颜色的 div 框。它目前在边框上具有固定宽度，但是当我缩小屏幕尺寸时，它最终会破坏整个布局外观。我需要它像普通的 div 框一样缩放。

我试过将边框设置为百分比，但这也破坏了设计。

图片link - https://gyazo.com/a5f1a200eaab02574248a06f265ecd52

有人可以帮忙吗？

#triangle1, #triangle2 {
    width: auto;
    height: 0;
    border: 18.75em solid transparent;
    border-top: 0;
    border-bottom: 12em solid #ffffff;
}

#triangle1 img, #triangle2 img {
    padding-top: 2em;
}

#house-boxes-section {
    background: #087db2;
    padding: 3.125em;
}

#homepage-residential-text, #homepage-commercial-text {
    background: #ffffff;
    width: 45.5em;
    color: #087db2;
    padding: 1.25em;
}

#house-boxes-section-left, #house-boxes-section-right {
    display: inline-block;
}

#house-boxes-section-right {
    float: right;
}

.homepage-read-more-link {
    text-align: center;
    margin-top: 2em;
    margin-bottom: 0;
}

.homepage-read-more-link a {
    background: #087db2;
    text-decoration: none;
    color: #ffffff;
    text-align: center;
    text-transform: uppercase;
    padding: 0.5em 2em;
}

.homepage-read-more-link a:hover {
    background: #ffffff;
    border: 2px solid #087db2;
    text-decoration: none;
    color: #087db2;
}
</style>
</head>
<body>

<div id="house-boxes-section">
    <div id="house-boxes-section-left">
    <div id="triangle1">IMG HERE</div>
    <div id="homepage-residential-text"><h2>Title1</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p><p class="homepage-read-more-link"><a href="/residential/">Read More</a></p></div>
    </div>

    <div id="house-boxes-section-right">
    <div id="triangle2">IMG HERE</div>
    <div id="homepage-commercial-text"><h2>Title2</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p><p class="homepage-read-more-link"><a href="/commercial">Read More</a></p></div>

    </div>
</div>

</body> ```

Answer 1

我相信你可以使用 scale() 方法 as described here

它应该看起来像这样（如果你想将它缩放到实际大小的 70%）：

.element-class {
scale(0.7)
}

如何正确缩放三角形 div 背景？

How do I scale a triangular div background properly?

css

resize

border

width