创建具有两种不同颜色的页脚答案

【问题标题】：Create footer with two different colors创建具有两种不同颜色的页脚
【发布时间】：2014-04-08 20:46:19
【问题描述】：

我正在尝试根据收到的设计创建页脚...

左边的背景颜色和右边不一样：

我有以下标记：

<div class"wrapper">
  <div class="content">
    The Text here should no go over the logo
  </div>
</div>

我的想法是 Content DIV 将徽标作为背景图像左对齐且不重复。

但是我不知道如何在左右创建不同的颜色...

我不确定是否可以控制高度以使所有内容对齐。

内容 div 居中并在图像上有橙色边框...

谢谢你，
米格尔

【问题讨论】：

标签： html css

【解决方案1】：

试试这个http://codepen.io/nicknameless/pen/cblzB/

我使用了 CSS3，没有额外的标记。这应该适合你。我认为它可以被清理，这只是一个快速概述，让你开始。

您提供的 HTML

<div class="wrapper">
  <div class="content">
    The Text here should no go over the logo
  </div>
</div>

CSS

html, body {
  padding: 0;
  margin: 0;
}
div.wrapper {
  height: 40px;
  background: #850000;
  width: 100%;
  display: block;
  position: relative;
  overflow: visible;
  top: calc( 100px - 40px );
}
div.wrapper:before {
  background: transparent url('http://placehold.it/100x100') no-repeat 0 0;
  content: " ";
  width: 100px;
  height: 100px;
  position: absolute;
  bottom: 0;
  left: 10%;
}
div.content {
  left: calc( 10% + 100px );
  padding-left: 10px;
  bottom: 0;
  background-color: #C70000;
  display: block;
  height: 40px;
  position: absolute;
  width: calc( 100% - ( 10% + 100px ) );
}

【讨论】：

【解决方案2】：

真的很蛋疼，我建议把内部矩形当成图片，但如果你真的想要在 CSS 中，这里是：http://jsfiddle.net/B97ym/

HTML：

<div class='wrapper'>
<div class="content">The Text</div>
<div class='border'>
    <div class='border2'></div>
    <div class='border3'></div>
    <div class='logodiv'>
        <div class='rectangle'></div>
    </div>
</div>

CSS：

.wrapper {
    width: 500px;
    height: 50px;
    margin: 100px auto;
    position: relative;
    background: linear-gradient(to right, #9c9e9f 40%, #000000 40%);
}

.content{
    margin: 0 0 0 50%;
    color: #ffffff;
}

.border{
    width: 4em;
    height: 4em;
    background: #FF0000;
    position: absolute;
    left: 33.7%;
    top: -55%;
    -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    transform: rotate(45deg);
    background: linear-gradient(to top, #000000 62%, #9c9e9f 62%);
}

.border2{
    width: 0.8em;
    height: 4em;
    background: #9c9e9f;
    position: absolute;
    left: 80%;
}

.border3{
    width: 0.8em;
    height: 0.85em;
    background: #000000;
    position: absolute;
    left: 80%;
    top: 80%;
}

.logodiv {
    width: 2.5em;
    height: 2.5em;
    background: #ffffff;
    position: absolute;
    top: 18%;
    left: 18%;
}

.rectangle{
    width: 2.1em;
    height: 2.1em;
    position: relative;
    background: #ffffff;
    top: -42%;
    left: -42%;
    -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    transform: rotate(45deg);
}

希望对某人有所帮助（：

【讨论】：

作为图像的内部矩形是什么意思？我不介意这样做......即使我需要使用更大的图像，我也更喜欢简单的代码......
好的，代码就简单多了：(jsfiddle.net/LK399)。图片是一个简单的矩形，我从你的图片中剪下了她：(s16.postimg.org/y6bfy058x/Untitled.png)

【解决方案3】：

在包含整个徽标的包装层上使用 CSS 背景图像，条形图。在内层添加足够的 margin-left 以将文本推到徽标之外。

【讨论】：

【解决方案4】：

创建一个内部有两个 div 的 div，左右宽度为 50%，高度固定。确保溢出徽标。

【讨论】：

【解决方案5】：

我想知道这个FIDDLE 是否会给你一个开始的地方。

CSS

.holder {
    width: 500px;
    margin: 100px auto;
    position: relative;
}
.leftdiv {
    width: 40%;
    height: 60px;
    float: left;
    background-color: red;
}
.rightdiv {
    width: 60%;
    height: 60px;
    float: left;
    background-color: blue;
}
.logodiv {
    width: 44px;
    height: 44px;
    position: absolute;
    left: 157px;
    top: -42px;
    background-color: white;
    transform: rotate(45deg);
    border-left: 20px solid blue;
    border-right: 20px solid red;
    border-top: 20px solid red;
    border-bottom: 20px solid blue;
}
.whiteout {
    background-color: white;
    width: 30px;
    height: 60px;
    border: 0px solid black;
    position: absolute;
    top: -60px;
    left: 183px;
}

【讨论】：