css - 斜めくさび形の CSS - ブラウザの中央に配置された端から端まで

Question

この形をCSSで作ってみました。

理想的には、ブラウザ ウィンドウの全長にまたがり、より大きな画面をサポートするために視野の外側に拡張し、角度が変化しないように中央に配置することもできます。

誰にも解決策はありますか？

また、角度のエイリアシングがひどくなるという問題が発生する可能性があると思います。画像の使用に頼る必要があるかもしれません。ただし、CSSを使用したい。

** 画像のスペル エラー。(無期限ではありません)

Answer 1

CSS3サポートを必要としないソリューション：

jsfiddleデモ

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

注：一部のブラウザでは、対角線が過度にアンチエイリアス処理されることがあります（誇張されたぼかしやドロップシャドウなど）。このトリックは、最近のブラウザでは少し予測できない場合があります。

Answer 2

Matt Coughlins greate answer の拡張 (および Sass) バージョンを作成しました。それをブログ (ドイツ語) で公開し、彼の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');
    }
}

SCSS Mixin を使用すると、独自のクラスを簡単に作成できます。

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