我試圖弄清楚如何用三角形背景顏色縮放 div 框。它目前在邊框上有一個固定的寬度，但是當我縮小螢屏尺寸時，它最終會破壞整個布局的外觀。我需要它像普通的 div 框一樣縮放。
我嘗試將邊框設定為百分比，但這也破壞了設計。
圖片鏈接 - 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> ```
uj5u.com熱心網友回復：
我相信您可以使用此處描述的 scale() 方法
它應該看起來像這樣（如果您想將其縮放到其實際大小的 70%）：
.element-class {
scale(0.7)
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/437827.html