Ihre Suchergebnisse


    Dieser Artikel benötigt eine technische Überprüfung.

    Unsere Freiwilligen haben diesen Artikel noch nicht in Deutsch übersetzt. Machen Sie mit und helfen Sie, das zu erledigen!


    The shape-outside CSS property uses shape values to define the float area for a float and will cause inline content to wrap around the shape instead of the float's bounding box.


    Formal syntax: none | <shape-box> || <basic-shape> | <image>
    shape-outside: none
    shape-outside: margin-box
    shape-outside: content-box
    shape-outside: border-box
    shape-outside: padding box
    shape-outside: circle()
    shape-outside: ellipse()
    shape-oustide: inset(10px 10px 10px 10px)
    shape-outside: polygon(10px 10px, 20px 20px, 30px 30px)
    shape-outside: url(image.png)
    shape-outside: initial
    shape-outside: inherit
    shape-outside: unset


    The float area is unaffected
    If one of these is specified by itself the shape is computed based on one of 'margin-box', 'border-box', 'padding-box' or 'content-box' which us their respective boxes including curvature from border-radius, similar to 'background-clip'.
    The shape is computed based on the values of one of 'inset()', 'circle()', 'ellipse()' or 'polygon()'. If a <shape-box> is also supplied, this defines the reference box for the <basic-shape> function. If <shape-box> is not supplied, then the reference box defaults to 'margin-box'.
    The shape is extracted and computed based on the alpha channel of the specified <image> as defined by 'shape-image-threshold'.
    User agents must use the potentially CORS-enabled fetch method defined by the HTML5 specification for all URLs in a 'shape-outside' value. When fetching, user agents must use "Anonymous" mode, set the referrer source to the stylesheet's URL and set the origin to the URL of the containing document. If this results in network errors such that there is no valid fallback image, the effect is as if the value 'none' had been specified.



    HTML Content

    <div class="main">
        <div class="left"></div>
        <div class="right"></div>
          Sometimes a web page's text content appears to be
          funneling your attention towards a spot on the page
          to drive you to follow a particular link.  Sometimes
          you don't notice.

    CSS Content

    .main {
        width: 500px;
        height: 200px;
    .left {
        -webkit-shape-outside: polygon(0 0, 100% 100%, 0 100%);
        float: left;
        width: 40%;
        height: 12ex;
        background-color: lightgray;
        -webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);
    .right {
        -webkit-shape-outside: polygon(100% 0, 100% 100%, 0 100%);
        float: right;
        width: 40%;
        height: 12ex;
        background-color: lightgray;
        -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%);
    p {
        text-align: center;




    Specification Status Comment
    CSS Shapes Module Level 1
    The definition of 'shape-outside' in that specification.
    Candidate Recommendation  

    Browser compatibility

    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
    Basic support 37 Not supported Not supported 24 8.0 -webkit
    Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
    Basic support Not supported Not supported Not supported Not supported 8.0 -webkit

    See also

    Schlagwörter des Dokuments und Mitwirkende

    Mitwirkende an dieser Seite: rebeccahauck, Ugoku, zolotov, Braiam, teoli
    Zuletzt aktualisiert von: Braiam,