CSS curved arrow

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!

The easiest would be to ceate an SVG red shape like that and use it as a background image. The rounded corners of the right triangular part makes it very hard to create a border or clip-path shape. I checked the page @mann suggested already, most solutions work fine for sharp angles. Maybe you can appreciate this SO Answer. Create your base clip-path shapes on Clippy — Rene van der Lende
– Rene van der Lende, Commented Jan 11, 2023 at 1:11

gre_gor · Accepted Answer · 2023-01-11 05:47:58Z

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.sstatic.net/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>

Can you please explain in the answer, what you are doing, why and which equations are being use?

Collectives™ on Stack Overflow

CSS curved arrow

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related