CSS curved arrow - html

Question

trying to achieve something similar to the below with CSS. The icon itself
I currently have it looking like this:
Code looks as follows:
.homepage-wrapper {
border: 1px solid #d07028;
width: 100%;
border-radius: 4px;
}
.homepage-body {
display: table-cell;
padding-left: 20px;
height: 80px;
}
.homepage-dispatch {
padding: 20px;
width: 100px;
display: table-cell;
background-color: #862632;
background-image: url('../Images/homepage/shipping.png');
background-repeat: no-repeat;
background-position: center;
}
<div class="homepage-wrapper">
<div class="homepage-dispatch">
</div>
<div class="homepage-body">
Same Day Dispatch before 12pm
</div>
</div>
I haven't bothered to include any attempted CSS on the arrow portion because it doesn't look right at all.
Any tips would be appreciated!

Answer 1

For a pure CSS solution, you can overlay 2 rounded pseudo elements to form the arrow.
It involves some math to position them properly.
.homepage-wrapper {
--arrow-radius: 10px;
--arrow-size: 100px;
--arrow-color: #862632;
width: 300px;
display: grid;
grid-template-columns: auto auto;
grid-template-rows: 10px auto 10px;
}
.homepage-dispatch {
grid-column: 1/1;
grid-row: 1/-1;
width: var(--arrow-size);
height: var(--arrow-size);
background-color: var(--arrow-color);
border-top-right-radius: var(--arrow-radius);
border-bottom-right-radius: var(--arrow-radius);
display: grid;
grid-template-columns: auto;
grid-template-rows: auto;
justify-items: end;
background-image: url(https://i.stack.imgur.com/2JBwD.png);
background-repeat: no-repeat;
background-position: center;
}
.homepage-dispatch::before,
.homepage-dispatch::after {
content: "";
display: block;
width: calc((var(--arrow-size) - var(--arrow-radius)*2) * 0.57735 + 2 * var(--arrow-radius));
height: calc((var(--arrow-size) - var(--arrow-radius)*2) * 0.57735 + 2 * var(--arrow-radius));
grid-column: 1 / 1;
grid-row: 1 / 1;
background-color: var(--arrow-color);
border-radius: var(--arrow-radius);
position: relative;
z-index: -1;
}
.homepage-dispatch::before {
align-self: start;
transform-origin: calc(100% - var(--arrow-radius)) var(--arrow-radius);
transform: rotate(-30deg);
}
.homepage-dispatch::after {
align-self: end;
transform-origin: calc(100% - var(--arrow-radius)) calc(100% - var(--arrow-radius));
transform: rotate(30deg);
}
.homepage-body {
grid-column: 1/-1;
grid-row: 2;
border: 1px solid var(--arrow-color);
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
height: 100%;
padding-left: calc(var(--arrow-size) * 1.3 - 0.5 * var(--arrow-radius) + 20px);
padding-right: 20px;
display: flex;
flex-direction: column;
justify-content: center;
font-family: sans-serif;
text-align: center;
}
<div class="homepage-wrapper">
<div class="homepage-dispatch">
</div>
<div class="homepage-body">
Same Day Dispatch before 12pm
</div>
</div>
<hr>
<div class="homepage-wrapper" style="--arrow-color: blue;--arrow-size: 120px;--arrow-radius: 20px;">
<div class="homepage-dispatch">
</div>
<div class="homepage-body">
Same Day Dispatch before 12pm
</div>
</div>