这是我必须制作的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>
但我无法调整此文本和按钮.我根据图像改变颜色面临问题.
`
解决方法
或者,您可以使用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>
