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

发布时间：2020-12-14 22:32:52 所属栏目：资源来源：网络整理

导读：这是我必须制作的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:

这是我必须制作的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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!