Question

我在两个彩色横幅上工作，它将在我的网站上，问题是正确的部分没有响应，我试过给它％，rem，px和vw，但是似乎没什么用。这是我的代码，因为你可以看到蓝色部分占用了太多的宽度，邮件无法保持固定。如何让蓝色部分占据div的其余部分

＆＃13;

.banner {
  margin-top: 0%;
  height: 1px;
  background-color: transparent;
  border-bottom: 40px solid #c5027f;
  border-right: 40px solid transparent;
  width: 50%;
  position:relative; 
}

.banner:after{
  content:"";
  position:absolute;
  height: 1px;
  top:0px;
  background-color: transparent;
  border-bottom: 40px solid #009ee2;
  border-right: 40px solid #009ee2;
  width: 134rem;
  z-index:-1;
  }

＆＃13;

<div class="banner">
  <p style="color: white; float: left; font-size: .65em;margin-left: 10px;">54466565</p></i>
   <p style="margin-left: 177%; margin-top: -5%; color: white; z-index: -1;">contacto@promedics.mx</p>
   
</div>

＆＃13;

Answer 1

我只是简单地使用渐变背景图片（而CSS就是这一行）：

＆＃13;

.banner {
  display: table;
  width: 100%;
  color: white;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#c5027f+50,009ee2+50 */
  background: #c5027f; /* Old browsers */
  background: -moz-linear-gradient(45deg, #c5027f 50%, #009ee2 50%); /* FF3.6-15 */
  background: -webkit-linear-gradient(45deg, #c5027f 50%,#009ee2 50%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(45deg, #c5027f 50%,#009ee2 50%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c5027f', endColorstr='#009ee2',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.banner p {
  padding: 16px;
  display: table-cell;
}

.banner p.email {
  text-align: right;
}

＆＃13;

<div class="banner">
  <p class="tel">54466565</p>
  <p class="email">contacto@promedics.mx</p>
</div>

＆＃13;

（感谢Colorzilla）

Answer 2

我认为你这样做的方式不是最好的。但这样做的示例解决方案是：

<div class="banner">
        <p style="color: white; float: left; font-size: .65em">54466565</p></i>
        <p style="color: white; float: right; font-size: .65em;margin-right: -100%; ">contacto@promedics.mx</p>
    </div>

但是，我建议创建两个div，内容的一半，中间添加第二种颜色的三角形。有很多更好的方法来实现它。您也可以使用隐藏在容器上的溢出旋转第二个并旋转内容。

祝你好运！

Answer 3

我会建议显示：内联块;

在两个段落标签上。此外，我不知道你是否注意到了，但你有一个随机的结局，可能会渲染和弄乱你的风格。尽量避免花车。

使两个彩色div响应

3 个答案: