如何使用html和css制作这个div？

Question

这是我必须制作的div的形象，但我不知道如何制作它

到目前为止我已经尝试过这个了。

＆＃13;

＆＃13;

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

＆＃13;

    <div class="rr rr-right">
                <div>
                  <h4></h4>
                    
                </div>
            </div>
            <div class="rr rr-left">
                <div>
                
                </div>
            </div>

＆＃13;

＆＃13;

＆＃13;

但我无法调整此处的文字和按钮。我根据图像改变颜色面临问题。 `

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

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/

Answer 3

或者，您可以使用SVG：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>