Làm cách nào để tạo div này bằng html và css?

Question

Đây là hình ảnh của div Tôi phải làm nhưng tôi không biết làm thế nào để làm cho nó

Tôi đã cố gắng này đến now`

.rr > div { 
 
    text-align: center; 
 
} 
 

 
.rr { 
 
    position: relative; 
 
    height: 200px; 
 
    background: #232E39; 
 
} 
 
.rr.rr-left { 
 
    z-index: 1; 
 
    float: left; 
 
    width: 90%; 
 
} 
 
.rr.rr-right { 
 
    z-index: 2; 
 
    float: right; 
 
    width: 10%; 
 
} 
 

 
.rr:after, 
 
.rr:before { 
 
    content: ""; 
 
    position: absolute; 
 
    top: 0; 
 
    width: 0; 
 
    height: 0; 
 
} 
 

 
.rr-left:after { 
 
    right: 0; 
 
    border-left: 100px solid #232E39; 
 
    border-bottom: 200px solid #dcdcdc; 
 
} 
 

 
.rr-right:before { 
 
    left: -100px; 
 
    border-right: 100px solid #232E39; 
 
    border-top: 200px solid transparent; 
 
} 
 

 
.rr-left > div { 
 
    margin-right: 100px; 
 
    margin-left: 50px; 
 
} 
 

 
.rr-right > div { 
 
    margin-right: 50px; 
 
    margin-left: 25px; 
 
}

<div class="rr rr-right"> 
 
       <div> 
 
        <h4></h4> 
 
        
 
       </div> 
 
      </div> 
 
      <div class="rr rr-left"> 
 
       <div> 
 
       
 
       </div> 
 
      </div>

Nhưng tôi không thể điều chỉnh văn bản và nút này. Tôi đang phải đối mặt với vấn đề trong việc thay đổi màu sắc của nó theo hình ảnh. `

Answer 1

Ngoài ra, bạn có thể sử dụng SVG:

body { 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 0px; 
 
    font-family: arial, sans-serif; 
 
    background: lightblue; 
 
} 
 

 
#container { 
 
    width: 400px; 
 
    height: 190px; 
 
    background: white; 
 
    position:absolute; 
 
    top:50%; 
 
    left:0; 
 
    right:0; 
 
    margin:auto; 
 
    -webkit-transform: translateY(-50%); 
 
    -ms-transform: translateY(-50%); 
 
    transform: translateY(-50%); 
 
} 
 

 
#left { 
 
    width: 60%; 
 
    height: 100%; 
 
    color: white; 
 
    background: #25A7D9; 
 
    float:left; 
 
} 
 

 
img { 
 
    width: 70px; 
 
    vertical-align: 60px; 
 
} 
 

 
h2, h4 { 
 
    margin-left: 15px; 
 
}

<div id=container> 
 
<div id=left><h2>Title</h2><h4><i>Subtitle</i></h4></div> 
 
    
 
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
 
\t width="60px" height="190px" viewBox="0 0 60 190" enable-background="new 0 0 60 195" xml:space="preserve"> 
 
<polygon fill="#25A7D9" points="0,190 0,0 60,0 "/> 
 
</svg> 
 

 
    
 
    <img src="https://cdn2.iconfinder.com/data/icons/bitsies/128/Mobile-128.png"> 
 
</div>

Answer 2

Điều này sẽ bắt đầu. https://jsfiddle.net/4nacnd4b/1/

.rr > div { 
    text-align: center; 
} 

.rr { 
    position: relative; 
    height: 200px; 
    background: #232E39; 
} 

.rr.rr-left { 
    z-index: 1; 
    float: left; 
    width: 90%; 
} 

.rr.rr-right { 
    z-index: 2; 
    float: right; 
    width: 10%; 
    background-color: white; 
} 

.rr:after, 
.rr:before { 
    content: ""; 
    position: absolute; 
    top: 0; 
    width: 0; 
    height: 0; 
} 

.rr-left:after { 
    right: 0; 
    border-left: 100px solid #232E39; 
    border-bottom: 200px solid #dcdcdc; 
} 

.rr-right:before { 
    left: -100px; 
    border-right: 100px solid white; 
    border-top: 200px solid transparent; 
} 

.rr-left > div { 
    margin-right: 100px; 
    margin-left: 50px; 
} 

.rr-right > div { 
    margin-right: 50px; 
    margin-left: 25px; 
} 

Answer 3

Bạn có thể thử CSS3 2D chuyển đổi bằng cách kết hợp vị trí tương đối và tuyệt đối, Bạn có thể lưu các dòng số mã

HTML

<div class="box"> 
    <div class="bg-blue"></div> 
    <div class="text"> 
     <h3>Don't miss out on the news.</h3> 
     <p>Get daily news alert</p> 
    </div> 
</div> 

CSS

div.box { 
    background: #ffffff; 
    position: relative; 
    top: 40px; 
    left 50px; 
    width: 327px; 
    height: 127px; 
    overflow: hidden; 
    font-family: "Calibri" 
} 
div.bg-blue { 
    position: absolute; 
    top: -40px; 
    left: -60px; 
    background: #0498d6; 
    width: 300px; 
    height: 327px; 
    -ms-transform: rotate(10deg); 
    -webkit-transform: rotate(10deg); 
    transform: rotate(10deg); 
} 

div.text { 
    position: absolute; 
    top: 0px; 
    left: 10px; 
    color: #ffffff; 
} 

JSFiddle

https://jsfiddle.net/62h01Ldg/

Answer 4

CSS gradient:

body { 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 0px; 
 
    font-family: arial, sans-serif; 
 
    background: lightblue; 
 
} 
 

 
#container { 
 
    width: 400px; 
 
    height: 190px; 
 
    background: white; 
 
    position:absolute; 
 
    top:50%; 
 
    left:0; 
 
    right:0; 
 
    margin:auto; 
 
    -webkit-transform: translateY(-50%); 
 
    -ms-transform: translateY(-50%); 
 
    transform: translateY(-50%); 
 
} 
 

 
#diagonal { 
 
    float:left; 
 
    width:50px; 
 
    height:190px; 
 
    background: white; /* For browsers that do not support gradients */ 
 
    background: -webkit-linear-gradient(left top, #25A7D9 50%, white 50%); /* For Safari 5.1 to 6.0 */ 
 
    background: -o-linear-gradient(bottom right, #25A7D9 50%, white 50%); /* For Opera 11.1 to 12.0 */ 
 
    background: -moz-linear-gradient(bottom right, #25A7D9 50%, white 50%); /* For Firefox 3.6 to 15 */ 
 
    background: linear-gradient(to bottom right, #25A7D9 50%, white 50%); /* Standard syntax */ 
 
} 
 

 
#left { 
 
    width: 250px; 
 
    height: 100%; 
 
    color: white; 
 
    background: #25A7D9; 
 
    float:left; 
 
} 
 

 
img { 
 
    width: 70px; 
 
    margin-top:55px; 
 
} 
 

 
h2, h4 { 
 
    margin-left: 15px; 
 
}

<div id=container> 
 
<div id=left><h2>Title</h2><h4><i>Subtitle</i></h4></div> 
 
<div id=diagonal></div> 
 
<img src="https://cdn2.iconfinder.com/data/icons/bitsies/128/Mobile-128.png"> 
 
</div>