너비가 100 % 인 svg 삼각형

Question

100 % 너비의 svg 이미지를 사용하고 싶습니다. 왼쪽 상단에서 오른쪽 아래까지 배경이 채워집니다. 여러 가지 방법으로 항상 100 % 너비 (배경 크기 등)로 만들려고 시도했지만 작동하지 않습니다.

svg 소스 코드를 여는 경우 몇 가지 "수정"너비가 있습니다. 어쩌면 이것이 문제 일 수 있습니다. 그러나 나는 그것을 어떻게 고칠 수 있을지 모른다.

div의 배경으로이 swg를 배치 할 수 있다면 좋을 것입니다.

<?xml version="1.0" encoding="utf-8"?> 
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
    width="1280px" height="70px" viewBox="0 0 1280 70" enable-background="new 0 0 1280 70" xml:space="preserve"> 
<polygon points="1280,70 0,70 0,0 "/> 
</svg> 

이 사람이 어떻게이 문제를 해결하는 아이디어가 있습니까 : (사용 CSS) 여기

내 SVG 코드인가? 나는 또한 회전 된 div 컨테이너로 다른 방법을 생각했다. 하지만 svg가 가장 좋은 방법이라고 생각합니다.

jsfiddle.net/maszzfom

Answer 1

제거 폭과 높이

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
    viewBox="0 0 1280 70" enable-background="new 0 0 1280 70" xml:space="preserve" preserveAspectRatio="none"> 
<polygon points="1280,70 0,70 0,0 "/> 
</svg> 

CSS

svg{width:100%} 

resource on responsive svg

: 여기

당신은 예를 볼 수 있습니다3210

Demo

upate는 : 파일로 SVG를 저장하고 삼각형 그렇지 않으면 pseudo element 또는 linear-gradient

Answer 2

을 시도 순수 CSS의 용질이 제공하려는 경우이

.element { 
    background-image: url(image.svg); 
    /* other styles */ 
} 

처럼 사용 내용 자체가 (그냥 장식), 그것은 CSS에 정의되어야합니다. 삼각형의 좌표가 반전 할 수 있습니다

.triangle { 
 

 
    position: relative; 
 

 
} 
 

 
.triangle:before { 
 

 
    background-repeat: no-repeat; 
 

 
    background-size: 100% 100%; 
 

 
    content: ''; 
 

 
    display: block; 
 

 
    position: absolute; 
 

 
    width: 100%; 
 

 
    left: 0; 
 

 
    bottom: -70px; 
 

 
    height: 70px; 
 

 
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='100,0 100,100 0,100' style='fill:%23000000;' /%3E%3C/svg%3E"); 
 

 
}

<div class="triangle"></div>

• : 삼각형 (100 % 폭과 고정 높이 70 픽셀)로, 당신이 그것을 달성 할 수 귀하의 예를 다음

  점 = '0,0 0,100 100,100'

• 삼각형 색상을 변경할 수 있습니다 : "채우기 : % 23000000;"
• CSS는 다음과 함께 작동합니다 : 필요에 따라 : 및 후에
• 바이올린 : http://jsfiddle.net/b8czxyzg/