1

trying to achieve something similar to the below with CSS. The icon itself

enter image description here

I currently have it looking like this:

enter image description here

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!

Vini
  • 8,299
  • 11
  • 37
  • 49
Sami.C
  • 561
  • 1
  • 11
  • 24
  • 2
    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](https://stackoverflow.com/a/65504085/2015909). Create your base `clip-path` shapes on [Clippy](https://bennettfeely.com/clippy/) – Rene van der Lende Jan 11 '23 at 01:11

1 Answers1

2

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>
gre_gor
  • 6,669
  • 9
  • 47
  • 52