使用CSS3创建一个倾斜的形状

Question

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

可以使用CSS3完成吗？

Answer 1

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

jsfiddle here：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属性，允许您创建此效果而无需黑客攻击。它被称为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的模式。