Come fare questo div usando html e css?

Question

Questa è l'immagine di div devo fare, ma non so come farlo

Ho provato questo fino 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>

Ma non riesco a regolare il testo e il pulsante su questo. Sto affrontando un problema nel cambiare i suoi colori in base all'immagine. `

Answer 1

In alternativa, è possibile utilizzare 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

Questo ti farà partire. 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

Si può provare CSS3 2D trasformare combinando posizione relativa e assoluta, è possibile salvare le righe numero di codice

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 gradiente alternativa:

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>