响应式CSS功能区

Question

我正在尝试创建一个css功能区，响应会很棒。否则我只会在桌面上显示它。

以下是我的开发网站的链接：http://website-test-lab.com/sites/xpect/

如果你看一下标题图片下方的橙色标注区域，我想让它看起来像附图。

任何帮助都将不胜感激。

Answer 1

你可以简单地在伪类和边界三角形技巧之前和之后进行。你的HTML非常简单：

<div class="ribbon">...</div>

你的CSS就是这样：

.ribbon { 
    background: #f47d19; 
    position: relative; 
    height: 50px; 
    width: 300px; 
    margin:0 25px; //Half of height
}
.ribbon:before,
.ribbon:after { 
    content: ''; 
    position: absolute; 
    height: 0; 
    width: 0; 
    top: 0; 
    border: 25px solid transparent; //Half of height
    border-top-color: #f47d19; 
    border-bottom-color: #f47d19; 
    z-index: -1; //Place triangles behind div
}
.ribbon:before { 
    left: -25px; //Half of height
}
.ribbon:after { 
    right: -25px; //Half of height
}

Fiddle Example Here

然后，对于响应部分，您只需更改宽度，高度，边距和位置属性，以匹配您所处的任何分辨率。

Answer 2

如果您正在使用Bootstrap，则可以将.img-responsive类用于图像。如果没有，请尝试在css中添加height:auto。这会让它变得敏感。

Answer 3

| parent div |

| div float left（＆gt;的图像）| div float left（content）| div float left（img＆lt;）|

| div style清除两个|

通过这种方式，您可以将所有内容都放入中间div并使整个事情响应

也可以使用基本表

来完成此操作