如何使用HTML和CSS制作此div？

Question

这是我需要制作的div的图片，但我不知道如何制作。

目前为止我尝试了这个方案：

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

但是我无法调整文本和按钮。在根据图像更改颜色方面，我遇到了问题。

- aashima vinayak

---

将您的主div分成两部分，对于第一部分，使用您想要的背景图像，在第二部分中使用手机图像。 - Murad Hasan

@Harry-谢谢，我会尝试这个。 - aashima vinayak

好的，那就试试加上颜色，如果我有任何想法就会分享出来。 - Murad Hasan

@FrayneKonok 好的 :) - aashima vinayak

SVG替代方案-点击此处- - L777

Answer 1

这是一个起始点。 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;
}

- Keith Anderson

Answer 2

你可以通过相对和绝对定位相结合来尝试CSS3 2D变换，这样可以节省代码行数。

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/

- Dickens A S

---

是的，这也会帮助我减少代码行数。谢谢。 - aashima vinayak

Answer 3

"或者，您可以使用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>

- L777

---

非常感谢您的帮助 :) - aashima vinayak

SVG的优点：您可以构建更高级的形状，而且您可以在喜欢的编辑器中实现它（如Adobe Illustrator或Inkscape），并为Web获取代码准备就绪。 - L777

Answer 4

CSS渐变的替代方法：

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>

- L777