Css 形状支持 IE/Firefox

Css shapes support in IE/Firefox

有谁知道 IE 和 firefox 是否以及何时会支持 css 形状功能,尤其是 shape-outside

CSS 形状模块

这是什么?
W3 shape module (2014)
W3 newest shape module (2015)

来自 W3 文档

CSS Shapes describe geometric shapes for use in CSS. For Level 1, CSS Shapes can be applied to floats. A circle shape on a float will cause inline content to wrap around the circle shape instead of the float’s bounding box

规范的当前状态是候选推荐。所以它几乎在当前的推荐中所以它或多或少可以被考虑在当前的网络规范中。


IE 支持吗?

一起来看看吧。有hope!
所以 Jonathan Sampson 分享了这个想法。

目前最新的Edge浏览器,其目前的IE状态处于待定状态。标记为中等优先级。

Can I use it now?

TL;DR

运行这个看看能不能用:

.left {
  shape-outside: polygon(0 0, 100% 100%, 0 100%);
  float: left;
  width: 40%;
  height: 12ex;
  transform: scaleX(-1);
  position: relative;
  overflow: hidden;
}
.left:before {
  content: " ";
  position: absolute;
  width: 100%;
  background-color: rgba(50, 50, 50, 0.6);
  height: 100%;
  transform: rotate(-17deg);
  transform-origin: bottom right;
}
p {
  width: 300px;
  text-align: center;
}
<div class="left"></div>
<p>
  If this text is inside the shape or all the text is below it, it's not working. If it is aligned to the top edge of the shape, then it is working.
</p>