What the heck is going on?

That seems to be related to this css:

HTML:

.breadcrumb .crust .arrow span {
border: 12px solid transparent;

I need to do a bit more digging though.

 

Well in your main breadcrumb CSS you have this image as the background, which is almost black (#050505): http://www.ncisaddict.com/forum/styles/dark_xf/xenforo/gradients/breadcrumbsbg.gif

You're then applying a transparent border to the arrow so that is the reason.

 

I was able to reproduce this problem by editing this template:

Admin CP -> Appearance -> Templates -> breadcrumb.css

In the two classes below you will see a background-color and a border-left-color which both use @primaryLightest. If you change one such that the two attributes no longer use the same color then you get that color mismatch.

Code:

.breadcrumb .crust a.crumb
{
	@property "breadcrumbItemCrumb";
	text-decoration: none;
	background-color: @primaryLightest;
	padding: 0 10px 0 18px;
	margin-bottom: -1px;
	border-bottom: 1px solid @primaryLighter;
	outline: 0 none;
	-moz-outline-style: 0 none;
	display: block;
	line-height: 24px;
	_border-bottom: none;
	@property "/breadcrumbItemCrumb";
}

Code:

.breadcrumb .crust .arrow span
{
	@property "breadcrumbItemArrowInner";
	border: 12px solid transparent;
	border-right: 1px none black;
	border-left-color: @primaryLightest;
	display: block;
	position: absolute;
	left: -13px;
	top: -12px;
	z-index: 51;
	white-space: nowrap;
	overflow: hidden;
	text-indent: 9999px;
	width: 0px;
	height: 0px;
	@property "/breadcrumbItemArrowInner";
}

Hopefully this helps.