Html 基于响应DOM的偶边图像跟踪

我的问题，使两个图像左右移动在适当的位置为我的简单的旗帜

以下是我的左右图像示例：

我花了很多时间只为了这件简单的事。非常感谢任何帮助

我的预期产出：

我尝试过的代码：

.content up提交事件
{
字号：0.85em；
最小高度：200px；
宽度：96%；
左边距：自动；
右边距：自动；
背景色：#ccc；
填充：20px 15px；
z指数：100；
}
.img左曲线
{
边缘底部：-115px；
最大宽度：14px；
z指数：-1；
}
.用横幅标出即将举行的活动
{
高度：40px；
填充顶部：8px；
颜色：#fff；
文本对齐：居中；
背景色：#000；
文本转换：大写；
}

即将举行的活动
事件
DDD总部，街道
2015年12月22日

新电子战训练（网络）
纽约市街道总部
2016年1月8日
下午2点至6点

您可以像这样使用纯CSS来实现这一点

---

就是这样。我用了你的照片，把它翻到了右边。我还尝试了一些小技巧来实现你试图用这个标题创建的3d感觉。我希望你喜欢

.banner up提交事件：在，
.在活动结束后发布横幅{
背景：透明url(http://i.stack.imgur.com/7Ylry.png)0.50%不重复；
内容：''；
位置：绝对位置；
宽度：14px；
高度：14px；
顶部：计算值（100%+1px）；
z指数：-1；
}
.在活动开始前发布横幅{
左：0；
}
.在活动结束后发布横幅{
右：0；
-moz变换：scaleX（-1）；
-o变换：scaleX（-1）；
-webkit转换：scaleX（-1）；
转换：scaleX（-1）；
过滤器：FlipH；
-ms过滤器：“FlipH”；
}
.用横幅标出即将举行的活动{
位置：相对位置；
高度：40px；
填充顶部：8px；
颜色：#fff；
文本对齐：居中；
背景色：#000；
文本转换：大写；
边框底部：1px实心rgba（255、255、255、.27）；
边界半径：2px；
盒影：0 4px 5px-2px rgba（0,0,0,2），0 7px 10px 1px rgba（0,0,0,14），0 2px 16px 1px rgba（0,0,0,12）；
}
.内容更新提交活动{
字号：0.85em；
最小高度：200px；
利润率：0.14px；
背景色：#ddd；
填充：20px 15px；
z指数：1；
盒影：0 1px 3px 0 rgba（0,0,0,2），0 1px 1px 0 rgba（0,0,0,14），0 2px 1px-1px rgba（0,0,0,12）；
边框：1px实心rgba（255、255、255、.27）；
边界顶部：0；
边界半径：0 0 4px 4px；
}

即将举行的活动
事件

DDD总部，街道

2015年12月22日

新电子战训练（网络）

城市街道总部

2016年1月8日

下午2点至6点

我找到了解决方案。但这不是最好的

.content up提交事件
{
位置：相对位置；
字号：0.85em；
最小高度：200px；
宽度：92%；
左边距：自动；
右边距：自动；
背景色：#ccc；
填充：20px 15px；
z指数：100；
}
.img左曲线
{
宽度：4%；
位置：绝对位置；
最高：0%；
左-4%；
}
.img右曲线
{
宽度：4%；
位置：绝对位置；
最高：0%；
右-4%；
}
.用横幅标出即将举行的活动
{
高度：40px；
填充顶部：8px；
颜色：#fff；
文本对齐：居中；
背景色：#000；
文本转换：大写；
}

即将举行的活动
事件
DDD总部，街道
2015年12月22日

新电子战训练（网络）
纽约市街道总部
2016年1月8日
下午2点至6点

它们必须是图像吗？只是好奇，不是真的。如果全部都是css，那就更好了谢谢你的回答，但是

.content up comming event

的宽度没有正确调整大小。调整浏览器大小时会发生这种情况。@Imran请解释您的意思。如果调整浏览器大小，则类

的内容将无法正确调整大小。content up comming event

无法正确调整大小。它与左右两派不符。我真的很想你的答案。谢谢。我接受你的回答。

.banner-up-comming-event{
    height:40px; 
    padding-top:8px; 
    color:#fff; 
    text-align: center; 
    background-color:#000; 
    text-transform: uppercase;
    position: relative;
}

.banner-up-comming-event:before {
    border-left: 15px solid #636363;
    border-top: 15px solid transparent;
    bottom: -16px;
    content: "";
    height: 0;
    left: 0;
    position: absolute;
    transform: rotate(-180deg);
}

.banner-up-comming-event:after {
    border-left: 15px solid #636363;
    border-top: 15px solid transparent;
    bottom: -16px;
    content: "";
    height: 0;
    right: 0;
    position: absolute;
    transform: rotate(90deg);
}