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

CodePudding user response：

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 >
  <div >
  </div>
  <div >
    Same Day Dispatch before 12pm
  </div>
</div>
<hr>
<div  style="--arrow-color: blue;--arrow-size: 120px;--arrow-radius: 20px;">
  <div >
  </div>
  <div >
    Same Day Dispatch before 12pm
  </div>
</div>

CodePudding user response：

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 >
    <div >
        &nbsp;
    </div>
    <div >
        Same Day Dispatch before 12pm
    </div>
</div>