안녕하세요 여러분, 포함 div의 치수와 상관없이 포함 된 div의 왼쪽 위 및 아래 오른쪽 모서리에 항상 결합 할 대각선을 만드는 방법을 찾고 있습니다. 단지 이것을 사용하는 방법이 있습니다. css3? 그렇지 않다면 jQuery와 css3을 사용하는 방법이 있으며, 어떻게 할 수 있습니까? 시간 내 주셔서 대단히css3을 사용하는 방법 포함하는 div의 왼쪽 상단과 오른쪽 하단 사이에 진단 라인을 만드는 방법은 무엇입니까?
감사합니다,
찰리
CSS3는 선을 그릴 수있는 가능성을 제공하지 않습니다. 캔버스 태그를 사용하고 JavaScript를 사용하여 선을 그립니다.
는 Heres는 튜토리얼 : 실제 사실 http://diveintohtml5.ep.io/canvas.html#divingin브릴리언트, 대단히 감사합니다. –
, 대각선 는 CSS에 (@ FlashFan의 대답에 반하는) 수 있습니다.
두 가지 방법이 마음에 봄 :
는 대각선을 포함하여 불규칙한 모양을 그릴 수 테두리를 포함하는 잘 알려진 해킹 있습니다.
여기에 좋은 글이 있습니다 : http://www.infimum.dk/HTML/slantinfo.html
제가 아는 한,이 기술은 모든 현재 브라우저에서 작동합니다. 아래쪽은 단일 모양을 만들기 위해 여러 개의 <div> 요소가 필요할 수 있다는 것입니다.
배경색이 채워진 좁은 상자를 만들고 CSS3 transform: rotate(); 기능을 사용하십시오.
이 기술은 요소를 회전시킬 수있는 브라우저에서만 작동합니다. 다행스럽게도 IE를 포함한 모든 브라우저에서 요소를 순환시킬 수 있습니다. 그러나 대부분의 최신 브라우저는 CSS의 공급 업체 접두사가 필요하고 IE는 완전히 다른 순환 게재 방법을 사용하기 때문에 CSS가 상당히 엉망이 될 수 있습니다.
좋은 소식은 그들이 이러한 기술 모두 순수 HTML/CSS 모든 브라우저에서 모두 작업이며, 그 중 둘은 자바 스크립트 또는 현대 HTML5 기술 중 하나를 필요로한다.
하지만 두 가지 모두 해킹이라고 할 수 있습니다. Javascript를 사용해도 괜찮다면, 모든 현재 브라우저에서 다시 작동하는 Raphael library을 살펴 보시기 바랍니다.
IE 사용자를 차단해도 괜찮 으면 HTML5 <canvas> 요소를 사용하고 간단히 선을 그 으리거나 벡터 그래픽을 선호한다면 SVG를 그릴 수 있습니다.
@Michael Mullany - 실제로 Raphael은 브라우저에 따라 SVG 또는 VML을 사용합니다 (IE <= 8의 경우 VML, 그 밖의 경우는 SVG). 그러나 Raphael을 사용하는 것은 Raphael의 Javascript 인터페이스가 원시 SVG에서 벗어나기 때문에 단순히 SVG를 사용하는 것과는 다릅니다. 또는 원시 SVG 코드를 사용하여 선을 그릴 수 있습니다. – Spudley
캔버스 요소로 그리는 것은 매우 간단하지만 동적 캔버스 크기에는 여전히 특정 문제가 있습니다. – elasticrash