Preparation

The first thing we want to do is to remove all borders in the arrows, or just leave a 1px border in the inner arrow. The final output should look like this:

Then you should set all the margins and paddings that suit your style. I set a 0 4px 0 10px padding for the crust link and a 20px right margin on the crust itself.

Styling arrow

Now we can style our arrows. Set the background the same as in your crust (Item Content), repeat this action with the border.

Little hint: you can use the inheritance by setting your colours as a @property.background-color or @property.border-color, where @property is the name of the property whose parameter you want to get.

When this is all done we can move to the main part.

The hack

We will rotate our arrow in order to get it look to what it was like before the modification. The css3 property we will use is called transform: rotation(degree);. And the rotated element will be our inner arrow, not the outer arrow. Why do we do this? Because our outer arrow is a holder that will hide all the unnecessary elements of the rotated inner arrow. Here is the code the you should put in the Miscellaneous section in ‘Item Arrow, Inner’ property.

transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
	

The next thing we want to do is to set the proper width and height for arrows. As our outer arrow is the holder we want to make it the same height as the crust, in my case I have 24px line-height in the crust and a 1px border, so the final height is 26px, we should set it for the outer arrow. The width will be 20px and it depends on your paddings in the crust. For the inner arrow we want to make it smaller because after rotation we don’t need such a big element. In other words, we want it to suit the height of the crust when rotated. After some testing I came up with the decision the the inner arrow should be a bit larger than the height of the crust (to be clear it should be 1px larger). Because if it has the same size after rotation as the crust it doesn’t look well and miss the right corners. So the height and width of the inner arrow should be tested anyway if you have any parameters that differs from mine ones. For me it was 18px (with borders I get 20px).

After all the calculation is done it is the best time to set a correct positioning. The outer arrow should have an absolute positioning and inner arrow may have a relative or absolute positioning. For our outer arrow we should set right to 20px and top to 0. This will move our outer arrow to the right and stick it to the top. For the inner arrow the top property depends on its height and width. For me it was top 3px. The right should be 10px because our outer arrow has a width of 20px.

The last thing is overflow. Since our outer arrow is the holder of the inner arrow we should set an overflow: hidden; to it in order to hide the remaining part of the inner arrow. Once it is done your arrow should display correctly.

One more thing

“What about box shadows and linear gradients?” – you might ask. That’s what for the modification was done!

For the linear-gradients you just need to set the correct angle. If your gradient is straight from bottom to top you just need to set the angle to 45 degrees. In other cases just add 45 degrees to your crust original linear gradient angle.

For box shadow you need to imagine that the box was rotated on the left and modify your original box shadow from crust with a correct positioning. For example if we have an inset box shadow with 0 on x and 1px on y we should now imagine that the box rotated and shift our box shadow to the top left corner. So we will get a -1px on x and 0 on y.

But there is a problem with outer shadows. Do you remember that our outer arrow has an overflow: hidden;? That hidden overflow means that our shadow of the Inner arrow will be cut. To escape it we should create a pseudo-element that will emulate our inner arrow and create a shadow for it. I will just simply show the code with some comments:

.crumbs .crust:after
{
	content: ""; /* makes this element actually work */
	display: block; /* required to set height and width */
	position: absolute;
	top: 50%;
	margin-top: -9px; /* equals the half of the height, to position in the middle */
	right: -10px; /* half of the outer arrow width */
	width: 18px; /* should be the same as the outer arrow width, with no regard to border */
	height: 18px; /* should be the same as the outer arrow height, with no regard to border */
	box-shadow: -1px 1px 2px rgba(0,0,0,0.2); /* shadow, corrected in respect to rotation + 1px for y axis  */
	z-index: 1;
	
	transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
}
	

And the last thing is to set the correct z-indexes. The .crust a (Item Content) should have z-index: 1; (don’t forget about position: relative; in order to get it working) and outer arrow should have z-index: 3;. This will set the layers to a correct level.