html - CSSArrowPlease が機能しないのはなぜですか?

Question

CSS Arrow Pleaseを使用して、右向きの矢印で境界線を生成しようとしています。ただし、機能していません。境界線のみが表示されており、その理由は正確にはわかりません。何か案は？PS私はChrome 28.0.1500.95を使用しています

編集：JSFiddleへのリンク

CSS

.green {
position: relative;
background: #none;
border: 4px solid green;
}
.green:after, .green:before {
left: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}

.green:after {
border-color: rgba(0, 0, 0, 0);
border-left-color: #none;
border-width: 30px;
top: 50%;
margin-top: -30px;
}

.green:before {
border-color: rgba(0, 0, 0, 0);
border-left-color: green;
border-width: 36px;
top: 50%;
margin-top: -36px;
}

「.green」のクラスを与えているオブジェクト

<%= image_tag(step.o_connection.cord_type.image.url(:thumb), :class => "green") %>

Answer 1

画像を div でラップし、クラスを div に適用します。