使用 CSS3 创建有角度的形状

Question

我被要求创建一个响应式应用程序，应用程序的布局/主题具有倾斜的形状（见下图）。我尝试过使用 CSS3 倾斜和旋转，但是这些属性值操纵了内容以及我不想要的形状。我只希望形状看起来是 90 度角，并且文本放在形状顶部。

这可以使用 CSS3 实现吗？

Answer 1

您可以使用::after 规则创建一个空的div 来旋转，而不是在容器本身上使用倾斜和旋转。

jsfiddle 在这里：http://jsfiddle.net/carasin/ndb1koca/1/

html:

<div id="banner-wrap">
     <div id="banner"><h1>Text here</h1></div>
</div>

css:

#banner-wrap {
    position:relative;
}
#banner::after { 
    content: "";
    display:block;
    background: orange;
    width:200%;
    height:500px;
    position:absolute;
    left:-30%;
    top:-60%;
    z-index:0;
    transform: rotate(13deg);
}
h1 {
    font-family:sans-serif;
    color:#fff;
    text-transform:uppercase;
    font-size:3em;
    z-index:1;
    position:relative;
    padding:40px 30px ;
}

Answer 2

我尝试过使用 CSS3 倾斜和旋转，但是这些属性值 操纵了我不想要的内容和形状。

为了防止内容受到影响，您可以简单地 skew() 内容在相反的方向以及 - Example。

使用的属性

• transform
• transform-origin
• overflow

* {
  margin: 0;
  padding: 0;
}

body {
  background-color: #fff;
}

h1, h2 {
  text-transform: uppercase;
  font-size: 6vw;
}

h2 {
  font-size: 4vw;
}

.wrapper {
  overflow: hidden;
}

header {
  background-color: gold;
  height: 40vw;
  line-height: 40vw;
  
  -webkit-transform: skewY(10deg);
  -ms-transform: skewY(10deg);
  -o-transform: skewY(10deg);
  transform: skewY(10deg);
  
  -webkit-transform-origin: 100% 0;
  -moz-transform-origin: 100% 0;
  -ms-transform-origin: 100% 0;
  -o-transform-origin: 100% 0;
  transform-origin: 100% 0;
  
  -webkit-box-shadow: inset 0 -.7em 1em -0.7em rgba(0,0,0,0.5);
  box-shadow: inset 0 -.7em 1em -0.7em rgba(0,0,0,0.5);
}

header h1 {
  -webkit-transform: skewY(-10deg);
  -ms-transform: skewY(-10deg);
  -o-transform: skewY(-10deg);
  transform: skewY(-10deg);  
  padding-left: 1em;
  color: white;
}

.search {
  background-color: lightgray;
  padding: 1em;
  margin: 0 1em;
}

<div class="wrapper">
  <header>
    <h1>Hello World</h1>
  </header>
</div>

<div class="search">
  <h2>Search</h2>
</div>

Answer 3

有一个即将推出的 CSS 属性，可让您在没有 hack 的情况下创建此效果。它被称为 clip-path，但目前（2014 年 10 月）您需要使用 -webkit-clip-path 以避免与现有 SVG CSS 属性发生冲突。这两个属性将很快合并为一个 clip-path。

这适用于 Chrome、Safari、iOS 8 和 Opera（Firefox 很快就会出现，显然没有 -webkit- 前缀）：

#banner {
  background: yellow;
  width: 600px;
  height: 300px;
  -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 50%);
}

由于多边形使用百分比，因此剪裁形状将随容器缩放，无论其尺寸如何——这对响应式设计很有好处。

您的用例意味着此解决方案可以优雅地降级为一个简单的矩形。

了解有关clipping as part of CSS Masking的模式。