CSS弯箭头

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"> &nbsp; </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>

Answer 2

It can be done with 1 element using:after, and also accommodate with bottom, right, width and height:

 .homepage-wrapper { border: 1px solid #d07028; width: 100%; border-radius: 4px; }.homepage-body { display: table-cell; padding-left: 52px; 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; border-radius: 0px 4px 4px 0px; position: relative; }.homepage-dispatch:after{ content: ""; width: 67px; height: 67px; transform-origin: center center; transform: rotate(45deg); background-color: #862632; border-radius: 0px 4px 0px 0px; border: 1px solid #d07028; position: absolute; right: -33px; bottom: 16px; z-index: -1; }

 <div class="homepage-wrapper"> <div class="homepage-dispatch"> &nbsp; </div> <div class="homepage-body"> Same Day Dispatch before 12pm </div> </div>