創建響應三角

Question

我想通過以下方式來設置兩個三角形：

兩個三角形有從中間去瀏覽器的外部。我試圖用一個包裝和一個背景顏色來設置它，然後旋轉包裝，但我無法得到它的響應。我試過的代碼是：

#page-header-wrapper-triangle { 
 
    background-color:#e14b41 ; 
 
    -webkit-transform: rotate(-12deg) translate3d(0, 0, 0); 
 
    -moz-transform: rotate(-12deg); 
 
    -o-transform: rotate(-12deg); 
 
    -ms-transform: rotate(-12deg); 
 
    transform: rotate(-12deg); 
 
    margin: 0 -21px; 
 
    -webkit-transform-origin: left center; 
 
    -moz-transform-origin: left center; 
 
    -o-transform-origin: left center; 
 
    -ms-transform-origin: left center; 
 
    transform-origin: left center; 
 
    -webkit-backface-visibility: hidden; 
 
    outline: 1px solid transparent; 
 
    position: relative; 
 
    min-height: 204px; 
 
    z-index:1000; 
 
    width:80%; 
 
    } 
 
    #page-header-wrapper-triangle-2 { 
 

 
    background-color:#e14b41 ; 
 
    -webkit-transform: rotate(12deg) translate3d(0, 0, 0); 
 
    -moz-transform: rotate(12deg); 
 
    -o-transform: rotate(12deg); 
 
    -ms-transform: rotate(12deg); 
 
    transform: rotate(12deg); 
 
    margin: 0 -54px; 
 
    -webkit-transform-origin: left center; 
 
    -moz-transform-origin: left center; 
 
    -o-transform-origin: left center; 
 
    -ms-transform-origin: left center; 
 
    transform-origin: left center; 
 
    -webkit-backface-visibility: hidden; 
 
    outline: 1px solid transparent; 
 
    position: relative; 
 
    min-height: 204px; 
 
    z-index:1000; 
 
    width:80%; 
 
    float:right; 
 
    top:-520px; 
 
    }

<div id="page-header-wrapper-triangle"> 
 
\t <div class="container"> 
 
     <div class="row"> 
 
     \t <div class="right-red col-xs-12 col-sm-6"> 
 
      \t 
 
      </div> 
 
      <div class="left-blue col-xs-12 col-sm-6"> 
 
      </div> 
 
\t \t </div> 
 
\t </div> 
 
</div> 
 

 
<div id="page-header-wrapper-triangle-2"> 
 
\t <div class="container"> 
 
     <div class="row"> 
 
     \t <div class="right-red col-xs-12 col-sm-6"> 
 
      \t 
 
      </div> 
 
      <div class="left-blue col-xs-12 col-sm-6"> 
 
      </div> 
 
\t \t </div> 
 
\t </div> 
 
</div>

這工作時，瀏覽器的寬度爲1920像素，但Ş一旦我改變它不工作的寬度。我不知道如何得到這個響應。

我也試過它與背景圖片。但這也行不通。

Answer 1

你可以用僞選擇器:after。它的響應速度只適用於一些小的和中等的寬度。但是您可以使用媒體查詢輕鬆進行自定義，並更改top和height的值。

There is a live example using SCSS

.header { 
 
    background-color: grey; 
 
    padding-bottom: 60px; 
 
    padding-top: 60px; 
 
    position: relative; 
 
    display: inline-block; 
 
    width: 100%; 
 
} 
 
.header .block-left { 
 
    float: left; 
 
    width: 50%; 
 
} 
 
.header .block-left:after { 
 
    background-color: red; 
 
    content: ' '; 
 
    left: 0; 
 
    top: -125px; 
 
    height: 200px; 
 
    position: absolute; 
 
    transform: skew(0deg, -15deg); 
 
    width: 50%; 
 
    z-index: 20; 
 
} 
 
.header .block-right { 
 
    float: right; 
 
    width: 50%; 
 
} 
 
.header .block-right:after { 
 
    right: 0; 
 
    background-color: yellow; 
 
    content: ' '; 
 
    top: -125px; 
 
    height: 200px; 
 
    position: absolute; 
 
    transform: skew(0deg, 15deg); 
 
    width: 50%; 
 
    z-index: 20; 
 
}

<div class="header"> 
 
    <div class="block-left"></div> 
 
    <div class="block-right"></div> 
 
</div>

Answer 2

下面是CSS三角形是如何工作的解釋：http://codepen.io/chriscoyier/pen/lotjh

@import url(http://fonts.googleapis.com/css?family=Andika); 

$stepTiming: 0.8s 0.2s; 

.triangle-demo { 
    width: 100px; 
    height: 100px; 
    margin: 0 auto; 
    background: tan; 
    border-top: 0 solid #EE7C31; 
    border-left: 0 solid #F5D97B; 
    border-bottom: 0 solid #D94948; 
    border-right: 0 solid #8DB434; 
    transition: $stepTiming; 

    .step-1 & { 
    border-top-width: 10px; 
    } 
    .step-2 & { 
    border-left-width: 10px; 
    } 
    .step-3 & { 
    border-right-width: 10px; 
    } 
    .step-4 & { 
    border-bottom-width: 10px; 
    } 
    .step-6 & { 
    background: transparent; 
    } 
    .step-7 & { 
    width: 0; height: 0; 
    } 
    .step-8 & { 
    border-left-color: transparent; 
    } 
    .step-9 & { 
    border-right-color: transparent; 
    } 
    .step-10 & { 
    border-top-color: transparent; 
    } 
} 

.triangle-title { 
    width: 300px; 
    padding: 1rem; 
    color: white; 
    background: #D94948; 
    border-radius: 20px; 
    margin: auto; 
    opacity: 0; 
    transition: $stepTiming; 
    .step-11 & { 
    opacity: 1; 
    } 
} 

body { 
    background: #333; 
    font-family: 'Andika', sans-serif; 
    color: white; 
    text-align: center; 
    font-size: large; 
    transform: translateZ(0); 
} 

.steps { 
    position: relative; 
    height: 45px; 
    > div { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    opacity: 0; 
    background: #333; 
    transition: 0.3s; 
    } 
    .step-0 { 
    opacity: 1; 
    } 
    .step-1 & .step-1 { 
    opacity: 1; 
    } 
    .step-2 & .step-2 { 
    opacity: 1; 
    } 
    .step-5 & .step-5 { 
    opacity: 1; 
    } 
    .step-6 & .step-6 { 
    opacity: 1; 
    } 
    .step-7 & .step-7 { 
    opacity: 1; 
    } 
    .step-8 & .step-8 { 
    opacity: 1; 
    } 
    .step-11 & .step-11 { 
    opacity: 1; 
    } 
} 

h1 { 
    text-transform: uppercase; 
    letter-spacing: 1px; 
    font-size: 1.5rem; 
    border-bottom: 1px solid #555; 
    color: #999; 
} 

FYI http://1stwebdesigner.com/css-shapes/