How to make this div using html and css?

Question

This is the image of div I have to make but I don't know how to make it

I have tried this till 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>

But I am unable to adjust the text and button on this. I am facing problem in changing its colors according to the image. `

Answer 1

This'll start you off. 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 2

You can try CSS3 2D transform by combining relative and absolute position, You can save the number lines of code

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 3

Alternatively, you can use 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"
	 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>