Tạo một góc cạnh màu Banner

Question

Hi Tôi đang cố gắng để tạo ra Look Strip góc cạnh sau trong HTML & CSS:

Chỉ Blue và khu vực màu tím với sau màu trắng.

tôi rõ ràng có thể thấy làm thế nào để làm điều đó bằng hình ảnh nhưng những gì về HTML/CSS chỉ?

Điều này có khả thi không?

của nó được sử dụng trên trang web - www.africa.dating

Tôi biết tôi nên có nhiều mã ví dụ nhưng tôi thực sự không chắc chắn bắt đầu từ đâu vì vậy tôi chỉ có HTML sau:

Fiddle : http://jsfiddle.net/e2dr5udr/3/

<div id="container"> 
    <div id="blue"></div> 
    <div id="purple"></div> 
</div> 

#container { 
    width: 100%; 
    height: 100px; 
    background-color: white; 
    position: absolute; 
} 

#blue { 
    width: 100%; 
    height: 100px; 
    background-color: blue; 
    position: absolute; 
} 

#purple { 
    width: 100%; 
    height: 100px; 
    background-color: purple; 
    position: absolute; 
} 

thankyou

Answer 1

Bạn có thể sử dụng một giả yếu tố và một số thao tác biên giới.

này sẽ cho phép bạn tạo ra nó chỉ có một yếu tố duy nhất, để tạo ra này:

.title { 
 
    height: 1px; 
 
    background-color: transparent; 
 
    border-bottom: 170px solid blue; 
 
    border-right: 170px solid transparent; 
 
    width: 190px; 
 
    position:relative; 
 
} 
 

 
.title:after{ 
 
    content:""; 
 
    position:absolute; 
 
    height: 1px; 
 
    top:0px; 
 
    background-color: transparent; 
 
    border-bottom: 170px solid purple; 
 
    border-right: 170px solid transparent; 
 
    width: 210px; 
 
    z-index:-1; 
 
    }

<div class="title"></div>

Nếu bạn không muốn sử dụng phương pháp này, một phương pháp khác (sử dụng nền gradient) có thể được xem here

---

Sử dụng SkewX:

div{ 
 
    position:relative; 
 
    height:15vh; 
 
    width:60vw; 
 
    overflow:hidden; 
 
    } 
 
div:before{ 
 
    z-index:-1; 
 
    content:""; 
 
    position:absolute; 
 
    top:0; 
 
    height:100%; 
 
    right:50%; 
 
    width:150%; 
 
    border-right:10px solid green; 
 
    background:cornflowerblue; 
 
    -webkit-transform:skewX(45deg); 
 
    transform:skewX(45deg); 
 
    }

<div>123</div>

Answer 2

đây là một bản demo của những gì bạn muốn: http://jsfiddle.net/shivanraptor/c4vrLrq7/

Về cơ bản đó là một quảng trường (#blue), Triangle (#triangle), bình hành (#parallelogram)

#container { 
 
     width: 100%; 
 
     height: 100px; 
 
     background-color: white; 
 
     position: absolute; 
 
    } 
 
    
 
    #blue { 
 
     width: 200px; 
 
     height: 100px; 
 
     background-color: blue; 
 
     float: left; 
 
    } 
 
    
 
    #triangle { 
 
    \t width: 0; 
 
    \t height: 0; 
 
    \t border-left: 50px solid transparent; 
 
    \t border-right: 50px solid transparent; 
 
    \t border-bottom: 100px solid blue; 
 
     float: left; 
 
     margin-left: -50px; 
 
     
 
    } 
 
    #parallelogram { 
 
    \t width: 50px; 
 
    \t height: 100px; 
 
    \t -webkit-transform: skew(30deg); 
 
    \t -moz-transform: skew(30deg); 
 
    \t  -o-transform: skew(30deg); 
 
    \t background: purple; 
 
     float: left; 
 
     margin-left: -50px; 
 
    }

<div id="container"> 
 
     <div id="blue"></div> 
 
     <div id="triangle"></div> 
 
     <div id="parallelogram"></div> 
 
    </div>

Answer 3

Nếu bạn muốn có một background-image, bạn có thể tận dụng rgba() giá trị và a: pseudo-yếu tố.

Ý tưởng là để áp dụng các background-image một :after: pseudo-phần tử và các linear-gradient với rgba() giá trị trên chính div.

Bạn có thể thay đổi độ mờ đục của linear-gradient bằng cách thay đổi giá trị alpha trong rgba(red, green, blue, alpha)

div { 
 
    position: relative; 
 
    height: 200px; 
 
    background: linear-gradient(55deg, rgba(122, 0, 201, 0.8) 75%, rgba(178, 0, 204, 0.8) 75%, rgba(178, 0, 204, 0.7) 80%, transparent 80%); 
 
} 
 
div:after { 
 
    position: absolute; 
 
    content: ''; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: url(http://lorempixel.com/700/200); 
 
    z-index: -1; 
 
}

<div></div>

Answer 4

Một cách tiếp cận khác sử dụng một yếu tố, các skewX() tài sản cho phía bên phải dốc, tính minh bạch được tạo với màu nền là rgba() và đường viền trên phần tử giả:

DEMO

div{ 
 
    height:100%; 
 
    position:relative; 
 
    overflow:hidden; 
 
} 
 
div:before{ 
 
    content:''; 
 
    position:absolute; 
 
    top:0; right:0; 
 
    width:100%; height:100%; 
 
    background-color: rgba(90, 74, 199, .8); 
 
    border-right:40px solid rgba(173, 96, 223, .8); 
 
    
 
    -webkit-transform-origin:100% 100%; 
 
    -ms-transform-origin:100% 100%; 
 
    transform-origin:100% 100%; 
 
    
 
    -webkit-transform:skewX(30deg); 
 
    -ms-transform:skewX(30deg); 
 
    transform:skewX(30deg); 
 
} 
 

 

 
/****** FOR THE DEMO *******/ 
 

 
html, body{ 
 
    background: url(http://lorempixel.com/output/people-q-c-640-480-1.jpg); 
 
    background-size:cover; 
 
    margin:0;padding:0; 
 
    height:100%;

<div></div>