div 내에서 비 ​​직사각형 부분 강조 표시

Question

div (직사각형)가 있고 그 안에 삼각형 모양을 갖고 싶습니다. 나는 그것을 가리 키기를 원합니다. 어떻게해야합니까?

나는 같은 모양과 다른 불투명도로 2 개의 이미지를 가지고 있고 그들을 가리 키기 위해 바꿀 생각입니다. 이 일을하는 또 다른 방법이 있습니까? 사각형이 아닌 div를 사용할 수 있습니까?

Answer 1

당신은 그것을 시도 할 수 http://jsfiddle.net/H42U7/

CSS 코드는 다음과 같습니다

.triangle-up { 
width: 0; 
height: 0; 
border-left: 50px solid transparent; 
border-right: 50px solid transparent; 
border-bottom: 100px solid #959595;} 

.triangle-up:hover { 
width: 0; 
height: 0; 
border-left: 50px solid transparent; 
border-right: 50px solid transparent; 
border-bottom: 100px solid #123456;} 

HTML : http://css-tricks.com/examples/ShapesOfCSS/

Answer 2

그것은 당신이 가서 당신이 그것을 사용하지만 인터넷 익스플로러에 대한 상관 없어 가정하는 것과 같은 삼각형의 맥락 필요가 얼마나 다시 인터넷 익스플로러에 따라 달라집니다.

Chris Coyer over @ CSS Tricks 이미 멋진 자습서가 있습니다. http://css-tricks.com/triangle-with-shadow/

당신은 당신이 http://fortawesome.github.io/Font-Awesome/을 확인 할 수 있습니다 아이콘이나 버튼으로 사용하려는 경우. 완전히 자유롭고 구현하기가 쉽습니다. 몇 가지 프로젝트에서 사용했고 부트 스트랩과 함께 사용하기 위해 만들어졌습니다.

희망이 도움이됩니다.