Ukośne kształty klina CSS - od krawędzi do krawędzi wyśrodkowane w przeglądarce

Question

Próbowałem zrobić ten kształt w CSS.

Idealnie będzie obejmował całą długość okna przeglądarki i prawdopodobnie wykracza poza pole widzenia, aby obsługiwać większe ekrany, a także być wyśrodkowany, aby kąt się nie zmieniał.

Ktoś ma jakieś rozwiązania?

Także myślę, że może napotkasz problem kąta wygładzaniem krawędzi surowo. Być może trzeba będzie uciec się do korzystania z obrazu. Chciałbym jednak użyć CSS.

** Błąd pisowni obrazu. (Czas nieokreślony nie Nieuchronnie)

Answer 1

Rozwiązanie, które nie wymagają obsługi CSS3:

jsfiddle demo

HTML

<div class="shape"> 
    <div class="top"></div> 
    <div class="bottom"></div> 
</div> 

CSS

.shape { 
    width:400px; 
    margin:0 auto; 
} 
.top { 
    height:0; 
    border-width:0 0 150px 400px; 
    border-style:solid; 
    border-color:transparent #d71f55 #d71f55 transparent; 
} 
.bottom { 
    height: 50px; 
    background-color:#d71f55; 
} 

/* Support transparent border colors in IE6. */ 
* html .top { 
    filter:chroma(color=#123456); 
    border-top-color:#123456; 
    border-left-color:#123456; 
} 

UWAGA: You czasami dostajesz zbyt duży błąd iasing przekątnej w niektórych przeglądarkach (jak exagerated blur lub dropshadow). Ta sztuczka może być trochę nieprzewidywalna w nowoczesnych przeglądarkach.

Answer 2

Utworzyłem rozszerzoną (i Sass) wersję greckiej odpowiedzi Matta Coughlina, I published it in my blog (german) i rozwidlałem jego jsfiddle demo.

HTML

<div class="diagonal-shape bl-to-tr"></div> 
<div class="block">Diagonal Shape</div> 
<div class="diagonal-shape tr-to-bl"></div> 
<br><br><br><br><br> 
<div class="diagonal-shape tl-to-br"></div> 
<div class="block">block2</div> 
<div class="diagonal-shape br-to-tl"></div> 

CSS

/** 
* Draw a diagonal shape, e.g. as diagonal segregation 
* 
* @author: Matt Coughlin, Pascal Garber 
* 
* @param $color: The color of the shape, default #d71f55 
* @param $direction: 
* bl-to-tr for bottom-left to top right 
* tr-to-bl for top-right to bottom left 
* tl-to-br for top-left to bottom right 
* br-to-tl for bottom-right to top left 
* @param $height: The height of the shape, default 100px 
* @param $width: The width of the shape, default 100vw 
* @param $color: The color of the shape, default #d71f55 
* 
* @see also: http://stackoverflow.com/a/11074735/1465919 
*/ 
.diagonal-shape.bl-to-tr { 
    height: 0; 
    border-style: solid; 
    border-width: 0 0 100px 100vw; 
    border-color: transparent #d71f55 #d71f55 transparent; 
} 
.diagonal-shape.tr-to-bl { 
    height: 0; 
    border-style: solid; 
    border-width: 100px 100vw 0 0; 
    border-color: #d71f55 transparent transparent #d71f55; 
} 
.diagonal-shape.tl-to-br { 
    height: 0; 
    border-style: solid; 
    border-width: 0 100vw 100px 0; 
    border-color: transparent transparent #d71f55 #d71f55; 
} 
.diagonal-shape.br-to-tl { 
    height: 0; 
    border-style: solid; 
    border-width: 100px 0 0 100vw; 
    border-color: #d71f55 #d71f55 transparent transparent; 
} 

.block { 
    height: 200px; 
    line-height: 200px; 
    background-color: #d71f55; 
    color: white; 
    text-align: center; 

} 

/* Support transparent border colors in IE6. */ 
* html .top { 
    filter:chroma(color=#123456); 
    border-top-color:#123456; 
    border-left-color:#123456; 
} 

SCSS

/** 
* Draw a diagonal shape, e.g. as diagonal segregation 
* 
* @author: Matt Coughlin, Pascal Garber 
* 
* @param $color: The color of the shape, default #d71f55 
* @param $direction: 
* bl-to-tr for bottom-left to top right 
* tr-to-bl for top-right to bottom left 
* tl-to-br for top-left to bottom right 
* br-to-tl for bottom-right to top left 
* @param $height: The height of the shape, default 100px 
* @param $width: The width of the shape, default 100vw 
* @param $color: The color of the shape, default #d71f55 
* 
* @see also: http://stackoverflow.com/a/11074735/1465919 
*/ 
@mixin diagonal-shape($color: #d71f55, $direction: 'bl-to-tr', $height: 100px, $width: 100vw) { 
    height: 0; 
    border-style: solid; 

    @if $direction == 'bl-to-tr' { 
     border-width: 0 0 $height $width; 
     border-color: transparent $color $color transparent; 
    } @else if $direction == 'tr-to-bl' { 
     border-width: $height $width 0 0; 
     border-color: $color transparent transparent $color; 
    } @else if $direction == 'tl-to-br' { 
     border-width: 0 $width $height 0; 
     border-color: transparent transparent $color $color; 
    } @else if $direction == 'br-to-tl' { 
     border-width: $height 0 0 $width; 
     border-color: $color $color transparent transparent ; 
    } 
} 

.diagonal-shape { 
    &.bl-to-tr { 
     @include diagonal-shape($brand-primary, 'bl-to-tr'); 
    } 
    &.tr-to-bl { 
     @include diagonal-shape($brand-primary, 'tr-to-bl'); 
    } 
    &.tl-to-br { 
     @include diagonal-shape($brand-primary, 'tl-to-br'); 
    } 
    &.br-to-tl { 
     @include diagonal-shape($brand-primary, 'br-to-tl'); 
    } 
} 

Dzięki SCSS Mixin możesz z łatwością tworzyć własne klasy:

.your-claas { 
    @include diagonal-shape($color, $direction, $height, $width); 
}