css - 使用 CSS3 创建 Angular 形状

Question

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

这可以使用 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 ;
}