how to use clip-path with text inside the div?

Question

i tried the following:

http://codepen.io/anon/pen/YXePBY

<div>lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet</div>

div {
    width: 280px;
    height: 280px;
    background: #1e90ff;
    -webkit-clip-path: polygon(0 0, 78% 0, 93% 99%, 0% 100%);
  clip-path: polygon(0 0, 78% 0, 93% 99%, 0% 100%);
  padding: 15px
}

/* Center the demo */
html, body { height: 100%; }
body {
    display: flex;
    justify-content: center;
    align-items: center;
}

what I want is, that the text inside the div gets a line break when it reaches the border. how is this possible?

and how can I get the highest browser compatibility?

is there maybe a way to make this with SVGs?

Answer 1

You can't do this with clip path alone.

Clip path is applied to the element regardless of its contents. It's not a definition of the outer bounds of an element but a definition of how the element is clipped within its bounds, hence the text not behaving as you might expect. It still requires the element to be a box, because currently in css, all things are boxes.

It is however possible. These two articles here and here go into the required detail. First of all you define an element using a css shape declaration. You then use a clip-path, with the same definition as the polygon definition, to clip away any of the background that affects your shape

Taken from the first article (and conveniently close to what you want):

.shaped{
    /*...*/
    shape-outside: polygon(0 0, 100% 0, 100% 100%, 30% 100%);
    shape-margin: 20px;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 30% 100%);
}

We can see it's pretty simple, the shape is defined as a polygon and it will behave like any other block, except it has a polygon edge rather than a block edge. Floating the element will then cause the text to flow around it.

Here is an example at JSFiddle* (-webkit- prefixes are required, as is a WebKit browser such as Google Chrome). By looking at this JSFiddle*, before clip-path is applied, you can see why it is necessary. In my example, both .shaped and .text are held within the same container but as siblings. The text flows around its sibling rather than expanding to fill its container. The container itself and use of background colours achieve the effect in the mock-up. (you may need to adjust the JSFiddle panel size to squish or stretch things and see the effect clearly).

Unfortunately, css shapes are very fresh. A quick glance at caniuse.com shows barely half of current browsers support these. Even Firefox has no implementation at all in the current version. As for IE ...

What I would suggest is that you use css shapes as your default and let the new browsers handle it (Firefox will catch up soon I'm sure) but provide some sort of browser feature detection method like Modernizr to decide whether or not to apply a fallback that will display the two sections as blocks without the slant.