如何使用歪斜財產

Question

我試圖讓這樣的事情：

我CSS3的造型是不是最好成績還沒有之一，但正在運行的代碼段是我試過，我甚至不能看內容正確。

請幫忙。

.wrapper{ 
 
    max-width: 600px; 
 
    margin: 0 auto; 
 
} 
 
.wrapper-inner{ 
 
    background: red; 
 
    position: relative; 
 
    width: 100%; 
 
    
 
} 
 

 
.wrapper-inner:before{ 
 
    position: absolute; 
 
    content: ''; 
 
    background-color: red; 
 
    top: -6px; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    display: block; 
 
    -webkit-transform: skewY(1.5deg); 
 
    -ms-transform: skewY(1.5deg); 
 
    transform-origin: right top; 
 
}

<div class="top"> 
 
<h1>HEADING 1</h1> 
 
</div> 
 
<element></element> 
 
<div class="wrapper"> 
 
    <div class="wrapper-inner"> 
 
    
 
     <div class="content-wrapper"> 
 
      <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, commodi maiores quo ex molestiae perferendis ducimus suscipit sequi officia earum asperiores consectetur illo minus similique, rem accusamus assumenda quae! Corporis!</p> 
 
     </div> 
 
    
 
    </div> 
 

 

 
</div>

Answer 1

UPDATE：

至於你提到你只想要div的頂部右側傾斜。要做到這一點，最好的辦法是相對的絕對增加一個div包裝

<div class="top"></div> 
<div class="wrapper"> 
    <div class="skew"></div> 
    .... 
</div> 

內和歪斜這個div並將其定位到包裝

這樣你可以有效果顯示的圖像而不用擔心包裝物的內容偏斜。

CSS

.skew{ 
    position: absolute; 
    background-color: #ca3030; 
    -webkit-transform: skewY(1deg); 
    -ms-transform: skewY(1deg); 
    transform: skewY(1deg); 
    transform-origin: right top; 
    top: 0px; 
    width: 100%; 
    height: 25px; 
    left: 0; 
    border-top-left-radius: 8px; 
    border-top-right-radius: 8px; 
    z-index:0; 
} 

檢查更新的代碼在這裏：

.top { 
 
    width: 100%; 
 
    height: 50px; 
 
    background-color: blue; 
 
} 
 

 
.wrapper { 
 
    position: relative; 
 
    top: -25px; 
 
    background-color: #ca3030; 
 
    max-width: 90%; 
 
    margin: 0 auto; 
 
    border-radius: 8px; 
 
    border-top-left-radius: 0px; 
 
    z-index:1; 
 
} 
 

 
.skew { 
 
    position: absolute; 
 
    background-color: #ca3030; 
 
    -webkit-transform: skewY(1deg); 
 
    -ms-transform: skewY(1deg); 
 
    transform: skewY(1deg); 
 
    transform-origin: right top; 
 
    top: 0px; 
 
    width: 100%; 
 
    height: 25px; 
 
    left: 0; 
 
    border-top-left-radius: 8px; 
 
    border-top-right-radius: 8px; 
 
    z-index:0; 
 
} 
 

 
.wrapper { 
 
    padding: 10px 20px; 
 
} 
 

 
.content-wrapper { 
 
    color: white; 
 
    margin: 5% 2%; 
 
} 
 

 
.content-wrapper .head { 
 
    font-size: 1em; 
 
} 
 

 
.content-wrapper .sub-head { 
 
    font-size: 0.8em; 
 
} 
 

 
.anchor { 
 
    width: 0; 
 
    height: 0; 
 
    border-left: 15px solid transparent; 
 
    border-right: 15px solid transparent; 
 
    border-top: 10px solid #ca3030; 
 
    position: absolute; 
 
    bottom: -9px; 
 
    left: 45%; 
 
}

<div class="top"></div> 
 
<div class="wrapper"> 
 
    <div class="skew"></div> 
 
    <div class="wrapper-inner"> 
 
    <div class="content-wrapper"> 
 
     <p class="head"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, commodi maiores quo ex molestiae accusamus assumenda quae! Corporis!</p> 
 
     <p class="sub-head"> 
 
     perferendis ducimus suscipit sequi officia earum asperiores consectetur illo minus similique, rem 
 
     </p> 
 
    </div> 
 
    <div class="anchor"></div> 
 
    </div> 
 

 
</div>