Wie mache ich das div mit html und CSS? Diese

Question

ist das Bild von div Ich habe zu machen, aber ich weiß nicht, wie es ich habe

zu machen versucht, dies bis der Jetzt-

.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>

Aber ich kann den Text und die Schaltfläche nicht anpassen. Ich stehe vor dem Problem, die Farben entsprechend dem Bild zu ändern. `

Answer 1

Alternativ können Sie SVG verwenden:

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

Diese werden Sie aus starten. 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

können Sie versuchen, CSS3 2D durch die Kombination von relativen und absoluten Position verwandeln, können Sie die Anzahl Codezeilen speichern

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 Alternative:

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>