Diagonal Wedge Shaped CSS - Edge to Edge Centrato nel browser

Question

Ho cercato di creare questa forma in CSS.

Idealmente coprirà l'intera lunghezza della finestra del browser e probabilmente si estenderà all'esterno del campo visivo per supportare schermi più grandi e anche essere centrato in modo che l'angolo non cambi.

Qualcuno ha qualche soluzione?

Inoltre penso che potrei correre in un problema dell'angolo aliasing duramente. Potrei dover ricorrere all'utilizzo di un'immagine. Vorrei usare il CSS però.

** Errore di ortografia Immagine. (Indeterminato non Inevitabilmente)

Answer 1

Una soluzione che non richiede il supporto 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; 
} 

Nota: È a volte diventa eccessivo antial iasing della diagonale in alcuni browser (come una sfocatura esagerata o un'ombra). Questo trucco può essere un po 'imprevedibile sui browser moderni.

Answer 2

Ho creato una versione estesa (e una Sass) della risposta completa di Matt Coughlins, I published it in my blog (german) e ho biforcato il suo 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'); 
    } 
} 

Con il Mixin SCSS è possibile creare facilmente le proprie classi:

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