How do I scale a triangular div background properly?-CodePudding

I'm trying to figure out how to scale a div box with a triangle shaped background color. It currently has a fixed width on the borders but when I make the screen size smaller it ends up breaking the whole layout look. I need it to scale exactly like a regular div box would.

I've tried setting the borders as a percentage but that breaks the design too.

Image link - https://gyazo.com/a5f1a200eaab02574248a06f265ecd52

Can anyone help please?

#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 ><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 ><a href="/commercial">Read More</a></p></div>

    </div>
</div>

</body> ```

CodePudding user response：

I believe you could use the scale() method as described here

It should look like this (if you want to scale it to 70% of its actual size) :

.element-class {
scale(0.7)
}