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") %>
이미지를 div로 래핑하고 클래스를 div에 적용합니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다