Css在IE/Firefox中支持形状

Flo*_* Gl 1 css shape css-shapes

有谁知道IE和Firefox是否以及何时支持css形状功能,特别是shape-outside

Per*_*ijn 7

CSS形状模块

这是什么?
W3形状模块(2014)
W3最新形状模块(2015)

W3文档

CSS Shapes描述了在CSS中使用的几何形状.对于级别1,CSS形状可以应用于浮点数.浮动上的圆形形状将导致内联内容环绕圆形而不是浮动的边界框

该规范的当前状态是候选推荐.因此,它几乎在当前的建议中,因此在当前的Web规范中可以或多或少地考虑它.


IE支持?

让我们来看看.有希望!
所以Jonathan Sampson分享了这个想法.

目前,对于最新的Edge浏览器,其当前的IE状态位于待办事项上.标记为中等优先级.

我现在可以用吗?

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;
}
Run Code Online (Sandbox Code Playgroud)
<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>
Run Code Online (Sandbox Code Playgroud)