Diagonale keilförmig CSS - Kante an Kante Zentriert im Browser

Habe ich versucht zu machen, diese Form in CSS.

Idealerweise erstrecken sich über die gesamte Länge des browser-Fensters und wahrscheinlich verlängern Sie außerhalb des Sichtfeldes zur Unterstützung von größeren Bildschirmen und auch zentriert werden, so dass sich der Winkel nicht ändert.

Jemand irgendwelche Lösungen?

Diagonale keilförmig CSS - Kante an Kante Zentriert im Browser

Denke auch ich, dass ich vielleicht in ein problem der Winkel aliasing hart.
Ich muss zu greifen, um über ein Bild. Würde gerne CSS verwenden, though.

** Bild Rechtschreibfehler. (Auf unbestimmte Zeit nicht Zwangsläufig)

mit css2 oder 3?
Was Funktioniert, ist für mich in Ordnung.
mit css 3 ist der Verlauf einfach dann sehen: colorzilla.com/gradient-editor
sehen Sie hier eine Geige mit veränderten css3 Gradienten - Hinweis: es wird fallback anmutig, ABER nicht angezeigt, genau so, wie Sie wollen, für alle Browser jsfiddle.net/Q9pWr
Ich würde stick mit Bildern, wenn Sie brauchen, um es volle cross-browser-obwohl.. gibt es eine andere Möglichkeit, die ich kenne, die mit einigen Kopf-Schrauben-Methode mit Abgeschrägter Kante Grenze Farben zu produzieren Dreiecke beliebiger Größe und dimension, wenn Sie verwenden MÜSSEN, nur css

InformationsquelleAutor Varazi | 2012-06-17

  1. 18

    Einer Lösung, die nicht erfordert CSS3-Unterstützung:

    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 exzessiven antialiasing-von der diagonalen, die in einigen Browsern (wie bei einem übertriebenen Weichzeichner oder Schlagschatten). Dieser trick kann ein wenig unberechenbar auf modernen Browsern.

    +1 für die Verwendung der Dreiländereck-Methode - sah sich vor langer Zeit in einigen javascript + css/dom-3d-demo. schön!
    Für ein paar demos von diesem trick finden Sie unter: forestpath.org/apps/webmotion/css-fg/... und forestpath.org/apps/webmotion/css-fg/...
    ta für den link - wieder +1 😉
    Es funktioniert gut, viel einfacher, als ich dachte, danke 🙂

    InformationsquelleAutor Matt Coughlin

  2. 1

    Habe ich erstellen einer erweiterten (und Sass) version von Matt Coughlins Super Antwort, Ich veröffentlichte in meinem blog (Deutsch) und Gabel 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 der SCSS Mixin können Sie ganz einfach erstellen Sie eigene Klassen:

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

    InformationsquelleAutor JumpLink

Schreibe einen Kommentar