rolo rolo - 1 year ago 69
CSS Question

Property shape doesn't exist?

I have some code that seems to only work in Chrome.

When I run it through W3C it states

"Property shape doesn't exist."

not valid css?

I'm wanting the main text on the page to wrap around a pull quote and hold the shape (elipse) of the pullquote.

Here is my code:

.quote {
float: left;
width: 40%;
box-shadow: 10px 10px 5px #888888;
border-radius: 50%;
shape-outside: ellipse();
margin: 1em;
background-image: url(../../Images/quote.png);
background-repeat: no-repeat;
background-position: center top;
.quotext {
display: inline-block;
font-size: 1.5em;
font-weight: bold;
color: #2c6f93;
padding: 2.25em;
font-style: italic;

<p>A bunch of text</p>
<blockquote class="quote">
<p class="quotext">pullquote text</p>
<p style="text-align:left;">more text A bunch of text</p>

Answer Source

It is only supported by Chrome, Opera and Safari, this last one using -webkit-


As already stated by @Paulie_D in his comment, validators tend to be very strict and mostly the time don't recognise either experimental features or properties with vendor prefixes. It doesn't mean that it won't work in the end.

MDN shape-outside