外部 CSS 形状 - Firefox 浏览器支持答案

【问题标题】：CSS Shape Outside - Firefox Browser Support外部 CSS 形状 - Firefox 浏览器支持
【发布时间】：2015-02-26 15:46:55
【问题描述】：

我一直在尝试让 CSS 形状跨浏览器工作，我已经让它在 Chrome 和 Safari 中运行没有任何问题，我似乎无法让它在 Firefox 中运行（尚未测试 IE，不期待那个）。

codepen

这是 HTML：

<div class="container">
  <section class="hero">
    <section class="slide">
      <div class="shaped"></div>
      <div class="hero-text">
        <h2>PROFESSIONAL PROPERTY MAINTENANCE SERVICES FOR BUSINESSES</h2>
        <p>Throughout the Northwest of England including Liveprool, Manchester, Preston, Wigan and St. Helens</p>
      </div>
    </section>
  </section>
</div>

这是 CSS：

.container {
  width: 960px;
  margin: 0 auto;
}
section.hero {
  padding: 8px;
  box-sizing: border-box;
  overflow: hidden;
  width: 100%;
  height: 400px;
  float:left;
  section.slide {
    position:relative;
    .shaped {
      background-size: cover;
      shape-outside: polygon(20% 0, 100% 0, 100% 100%, 0% 100%);
      clip-path: polygon(20% 0, 100% 0, 100% 100%, 0% 100%);
      background-image: url(http://www.e-architect.co.uk/images/jpgs/aberdeen/bon_accord_centre_tonyfreeman221207_04.jpg);
      height: 384px;
      float:left;
      width: 70%;
      float: right;
      shape-margin: 20px;
    }
    .hero-text {
      box-sizing: border-box;
      background-color: #333;
      color: white;
      padding: 30px;
      height: 384px;
      width: 50%;
      h2 {
        margin-bottom: 20px;
      }
    }
  }
}

我尝试了一个 Adobe 形状的 polyfill，但没有任何区别，还有其他选择吗？或者我应该考虑完全改变设计吗？

谢谢

【问题讨论】：

标签： html css firefox svg css-shapes

【解决方案1】：

您可以将svg 的clipPath 用于cross-browser support。

.container {
  width: 960px;
  margin: 0 auto;
}
section.hero {
  padding: 8px;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  overflow: hidden;
  width: 100%;
  height: 400px;
  float: left;
}
section.hero section.slide {
  position: relative;
}
.shaped {
  background: url(http://www.e-architect.co.uk/images/jpgs/aberdeen/bon_accord_centre_tonyfreeman221207_04.jpg);
  height: 384px;
  width: 100%;
}
section.hero section.slide .hero-text {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-color: #333;
  color: white;
  padding: 30px;
  height: 384px;
  width: 50%;
}
section.hero section.slide .hero-text h2 {
  margin-bottom: 20px;
}
svg {
  float: right;
}

<div class="container">
  <section class="hero">
    <section class="slide">
      <svg width="700" height="550">
        <defs>
          <clipPath id="shape">
            <path d="M100,0 L700,0 L700,550 L0,550z" />
          </clipPath>
        </defs>
        <foreignObject clip-path="url(#shape)" width="100%" height="100%">
          <div class="shaped"></div>
        </foreignObject>
      </svg>
      <div class="hero-text">
        <h2>PROFESSIONAL PROPERTY MAINTENANCE SERVICES FOR BUSINESSES</h2>
        <p>Throughout the Northwest of England including Liveprool, Manchester, Preston, Wigan and St. Helens</p>
      </div>
    </section>
  </section>
</div>

您可以使用这种方法添加曲线而不是直线。

这里有一些例子。

.container {
  width: 960px;
  margin: 0 auto;
}
section.hero {
  padding: 8px;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  overflow: hidden;
  width: 100%;
  height: 400px;
  float: left;
}
section.hero section.slide {
  position: relative;
}
.shaped {
  background: url(http://www.e-architect.co.uk/images/jpgs/aberdeen/bon_accord_centre_tonyfreeman221207_04.jpg);
  height: 384px;
  width: 100%;
}
section.hero section.slide .hero-text {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-color: #333;
  color: white;
  padding: 30px;
  height: 384px;
  width: 50%;
}
section.hero section.slide .hero-text h2 {
  margin-bottom: 20px;
}
svg {
  float: right;
}

<div class="container">
  <section class="hero">
    <section class="slide">
      <svg width="700" height="550">
        <defs>
          <clipPath id="shape">
            <path d="M100,0 L700,0 L700,550 L0,550 Q0,275 200,0" />
          </clipPath>
        </defs>
        <foreignObject clip-path="url(#shape)" width="100%" height="100%">
          <div class="shaped"></div>
        </foreignObject>
      </svg>
      <div class="hero-text">
        <h2>PROFESSIONAL PROPERTY MAINTENANCE SERVICES FOR BUSINESSES</h2>
        <p>Throughout the Northwest of England including Liveprool, Manchester, Preston, Wigan and St. Helens</p>
      </div>
    </section>
  </section>
</div>

.container {
  width: 960px;
  margin: 0 auto;
}
section.hero {
  padding: 8px;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  overflow: hidden;
  width: 100%;
  height: 400px;
  float: left;
}
section.hero section.slide {
  position: relative;
}
.shaped {
  background: url(http://www.e-architect.co.uk/images/jpgs/aberdeen/bon_accord_centre_tonyfreeman221207_04.jpg);
  height: 384px;
  width: 100%;
}
section.hero section.slide .hero-text {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-color: #333;
  color: white;
  padding: 30px;
  height: 384px;
  width: 50%;
}
section.hero section.slide .hero-text h2 {
  margin-bottom: 20px;
}
svg {
  float: right;
}

<div class="container">
  <section class="hero">
    <section class="slide">
      <svg width="700" height="550">
        <defs>
          <clipPath id="shape">
            <path d="M100,0 L700,0 L700,550 L-210,550 Q200,275 150,0" />
          </clipPath>
        </defs>
        <foreignObject clip-path="url(#shape)" width="100%" height="100%">
          <div class="shaped"></div>
        </foreignObject>
      </svg>
      <div class="hero-text">
        <h2>PROFESSIONAL PROPERTY MAINTENANCE SERVICES FOR BUSINESSES</h2>
        <p>Throughout the Northwest of England including Liveprool, Manchester, Preston, Wigan and St. Helens</p>
      </div>
    </section>
  </section>
</div>

.container {
  width: 960px;
  margin: 0 auto;
}
section.hero {
  padding: 8px;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  overflow: hidden;
  width: 100%;
  height: 400px;
  float: left;
}
section.hero section.slide {
  position: relative;
}
.shaped {
  background: url(http://www.e-architect.co.uk/images/jpgs/aberdeen/bon_accord_centre_tonyfreeman221207_04.jpg);
  height: 384px;
  width: 100%;
}
section.hero section.slide .hero-text {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-color: #333;
  color: white;
  padding: 30px;
  height: 384px;
  width: 50%;
}
section.hero section.slide .hero-text h2 {
  margin-bottom: 20px;
}
svg {
  float: right;
}

<div class="container">
  <section class="hero">
    <section class="slide">
      <svg width="700" height="550">
        <defs>
          <clipPath id="shape">
            <path d="M100,0 L700,0 L700,550 L75,550 Q-70,412.5 50,200 Q100,100 100,0" />
          </clipPath>
        </defs>
        <foreignObject clip-path="url(#shape)" width="100%" height="100%">
          <div class="shaped"></div>
        </foreignObject>
      </svg>
      <div class="hero-text">
        <h2>PROFESSIONAL PROPERTY MAINTENANCE SERVICES FOR BUSINESSES</h2>
        <p>Throughout the Northwest of England including Liveprool, Manchester, Preston, Wigan and St. Helens</p>
      </div>
    </section>
  </section>
</div>

【讨论】：

谢谢，我也试试。两者看起来都不错，但哪个更好/更兼容？
@Scriptable - 我想说svg 是要走的路。查看浏览器对我的方法的支持。 ---->caniuse.com/#search=svg。它支持除 IE8 以外的所有浏览器。
@Scriptable - 你甚至可以像这样放置曲线----> codepen.io/chipChocolate/pen/raMXmK
很好！，我同意... SVG 似乎是更好的选择，谢谢 Chip
我喜欢你发布的其他人，会玩弄它。再次感谢

【解决方案2】：

我建议一起改变方法，shape-outside 还不是supported by FF or IE，您可以在伪元素上使用简单的transforms 来实现这种布局：

DEMO

section {
  background: url(http://lorempixel.com/output/people-q-c-640-480-9.jpg);
  background-size: cover;
  padding: 5%;
  position: relative;
  overflow: hidden;
  min-width: 700px;
}
section h2,
section p {
  width: 40%;
  padding: 2% 5%;
  position: relative;
  z-index: 1;
}
section h2 {
  width: 50%
}
section:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 60%;
  height: 300%;
  background: grey;
  z-index: 0;
  -webkit-transform-origin: 100% 0;
  -ms-transform-origin: 100% 0;
  transform-origin: 100% 0;
  -webkit-transform: rotate(20deg);
  -ms-transform: rotate(20deg);
  transform: rotate(20deg);
}

<section>
  <h2>PROFESSIONAL PROPERTY MAINTENANCE SERVICES FOR BUSINESSES</h2>
  <p>Throughout the Northwest of England including Liveprool, Manchester, Preston, Wigan and St. Helens</p>
</section>

IE9+ 支持 transform 属性。更多信息canIuse

【讨论】：

这看起来是一个更可靠的解决方案，谢谢。没想到