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

Not a direct answer (or a dupe) but this thread may give you some ideas on how to create a slanted shape - http://stackoverflow.com/questions/30441122/shape-with-a-slanted-side-responsive — Harry, Feb 22 '16 at 05:43
partition your main div into 2 part, for the first part use a background image like you want, and in the second part use the phone image. — Murad Hasan, Feb 22 '16 at 05:44
@FrayneKonok I have tried that but I have to deliver it using colors only, in the second part I can use phone image but not in first — aashima vinayak, Feb 22 '16 at 05:50
okey, then try it with color, if i got any idea then i will share. — Murad Hasan, Feb 22 '16 at 05:51
[SVG alternative -click-](http://tympanus.net/codrops/2014/01/07/shape-hover-effect-with-svg/) — L777, Feb 22 '16 at 06:13

score 4 · Answer 1 · answered Feb 22 '16 at 05:55

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;
}

score 2 · Answer 2 · answered Feb 22 '16 at 06:20

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/

Yes this will also help me out with lesser number of code line. Thanks — aashima vinayak, Feb 22 '16 at 07:41

L777 · Accepted Answer · 2016-02-22T09:49:38.633

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>

The advantages of svg: you can build more advanced shapes plus you can do it in your favorite editor (like Adobe Illustrator or Inkscape) and get the code ready for web. — L777, Feb 22 '16 at 13:26

score 1 · Answer 4 · answered Feb 22 '16 at 09:47

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>

How to make this div using html and css?

4 Answers4