Diagonale Keilform CSS - Kante zu Kante im Browser zentriert

Question

Ich habe versucht, diese Form in CSS zu machen.

Idealerweise erstreckt es sich über die gesamte Länge des Browserfensters und erstreckt sich wahrscheinlich außerhalb des Sichtfelds, um größere Bildschirme zu unterstützen, und ist auch so zentriert, dass sich der Winkel nicht ändert.

Wer hat irgendwelche Lösungen?

Auch ich denke, ich in ein Problem des Winkels hart Aliasing führen könnte. Ich muss möglicherweise auf ein Bild zurückgreifen. Möchte jedoch CSS verwenden.

** Bild Rechtschreibfehler. (Indefinitely nicht Zwangsläufig)

Answer 1

Eine Lösung, die nicht CSS3-Unterstützung benötigt:

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; 
} 

Hinweis: Sie manchmal übermäßig antial iasing der Diagonale in einigen Browsern (wie eine übertriebene Unschärfe oder Dropshadow). Dieser Trick kann in modernen Browsern etwas unberechenbar sein.

Answer 2

Ich habe eine erweiterte (und eine Sass) Version von Matt Coughlins große Antwort, I published it in my blog (german) und Gabeln seine 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'); 
    } 
} 

Mit dem SCSS Mixin können Sie ganz einfach eigene Klassen erstellen: