CSS만으로 가능한 특수 삼각형 (테두리 색을 변경할 수 있습니까?)

나는 일종의 연설 거품을 가지고있다. http://screencast.com/t/xy3xPHYlM은 둥근 모서리이고 삼각형은 왼쪽에있다 (:nth-child(odd/even)에 따라). 테두리와 둥근 모서리는 border 및 border-radius과 함께 문제가되지 않습니다. 하지만 나는 삼각형을 CSS로 만들고 싶다. 그래서 나는 전체의 경계 색을 바꿀 수있다. 현재 삼각형은 두 개의 삼각형 (왼쪽과 오른쪽)의 스프라이트입니다.CSS만으로 가능한 특수 삼각형 (테두리 색을 변경할 수 있습니까?)

CSS (2 even)로 삼각형을 사용할 수 있습니다 : http://jsfiddle.net/rudiedirkx/eDdZb/하지만 그것들은 그 것처럼 보이지 않습니다. 삼각형을 스크린 샷에있는 것처럼 보이게 만들 수있는 방법은 무엇입니까? 나는 :before과 :after 요소 만 사용하는 것을 선호하지만, 필요한 경우 더 추가 할 수 있습니다. 순수한 CSS가 있다면

You can edit this fiddle if you'd like to try.

출처

2011-09-21 Rudie

안녕하세요, CSS 변형 변형을 시도해 보셨습니까? 그리고 아마 회전과 함께. : after 요소를 디자인에 맞게 "변형"할 수 있어야합니다. (나는 JS Fiddle에서 비뚤어 짐을 느낄 수는 없지만 예제를 준비하려고 시도했다.)/ –

변환을 적용한 후에는 Chrome에서 비뚤어진 div 상단에 상자를 표시 할 방법이 없다. http : //jsfiddle.net/duopixel/tkqYp/ – Duopixel

, 그것은 직각을 가지고있다. 주위에 그 길 (나는 그것을 안다). 그게 문제가되지 않는다면 그 중 두 가지를 사용하십시오. 한 줄은 어둡고 한쪽은 가벼운 것이고 작은 픽셀은 가려집니다.

이것은 쉽게 구성 가능한 색상으로 선을 그릴 수있는 가장 쉬운 방법으로 일부 SVG를 원하는 것처럼 들립니다. 그래도 마크 업이 약간 혼란 스러울 수 있습니다.

편집 : 테두리 스타일을 지정하기위한 추가 비상 한 요소가 허용되면 화살표를 관리 할 수 있습니다. See fiddle - 크롬 등에서도 쉽게 작동합니다.

출처

2011-09-21 12:01:52

SVG를 스타일 시트 안에 넣으시겠습니까? SVG 데이터 URL이 있습니까? 그것은 굉장하게 들리고 나는 그것을 원한다! 'background : url (data : text/svg, )'과 같은 것? 그게 무슨 뜻이야? – Rudie

SVG 데이터에 관해서는 오페라가이를 지원할 것이라고 생각합니다. 내가 확인한 지 오래다. 아마도 Fx의 다소 새로운 프레임 워크라도 SVG-anywhere 모델에서 그런 종류의 것을 처리 할 것입니다. 현실적으로, 두 개 또는 세 개의 SVG 요소로 마크 업을 혼란스럽게 생각했습니다. 펑키 한 테두리 모양의 색상은 여전히 CSS에 의해 제어됩니다. –

사실, 당신이 생각하고있는 바를 따라 더 많은 것을 원한다면 위의 편집을보십시오. –

CSS만으로 가능한 특수 삼각형 (테두리 색을 변경할 수 있습니까?)

답변

관련 문제