所有桌面分辨率的页脚特殊形状

Question

我创建了自己的页脚设计，我正在忙着实现它。我现在面临的问题是在右侧和左侧的页脚较暗的一侧，如图中所示。我玩transperancies并尝试创建那些对角线形状。我使用:before和:after状态创建了这些表单。页脚内容需要包装在1024px的包装中。问题在于这一点......

较暗的边应该填满每边100％的宽度。中间部分具有相同的颜色但具有不同的不透明度。我尝试过不同的技术而没有结果 我有点卡住了......

图像1是所需的效果。

图2是我用实际代码得到的问题。如果屏幕大于1024px，则以这种方式显示。

我正在努力保持HTML5标记尽可能干净，并依靠CSS来完成工作。 你有什么建议吗？

图片1：

图片2：

HTML5标记：

 <footer>
            <div class="wrapper">
                <aside class="contact-details">
                    <span>Email:
                        <a href="mailto:mail">info@lorem.com</a>
                    </span>
                    <span>Tel:
                        <a href="tel:WAITING FOR OFFICAL PHONE">786 - 520 - 482</a>
                    </span>
                </aside>

                <aside class="company-details">
                    <span>2013 lorem lorem</span>
                    <h1>LOREM LOREM LOREM</h1>
                </aside>

                <aside class="social-details">
                    <span class="visitors">Visitors: 98131</span>
                    <ul>
                       <li>
                           <a href="#" class="sprites-facebook ir">facebook</a>
                       </li>
                       <li>
                           <a href="#" class="sprites-twitter ir">twitter</a>
                       </li>
                       <li>
                           <a href="#" class="sprites-googleplus ir">google plus</a>
                       </li>
                       <li>
                           <a href="#" class="sprites-linkedin ir">linkedin</a>
                       </li>
                       <li>
                           <a href="#" class="sprites-youtube ir">youtube</a>
                       </li>
                    </ul>
                </aside>
            </div>
        </footer>

这是我的SASS：

footer{
    height: 30px;
    width: 100%;
    border-top-width: 1px;
    border-top-style: solid;
    border-color: rgba(140,137,121,0.85);
    @include box-sizing(border-box);
    font-size: 14px;
    @include background-image(linear-gradient(rgba(37,36,37,0.2), rgba(45,44,45,0.2)));

    a{
        text-decoration: none;
        padding: 0 0 0 5px;

        &:link,&:visited{
            color: #cfcfcf;
        }

        &:hover{
            color: #ffffff;
        }

        &:active{
            color: rgba(247,51,117,0.8);
        }
    }
}

aside{
        float: left;
        position: relative;

    &.contact-details{

        &:before{
            position: absolute;
            right: -7px;
            border-top: 30px solid rgba(38,37,38,0.75);
            border-right: 30px solid transparent;
            z-index: -1;

            // @include background-image(linear-gradient(rgba(37,36,37,0.75), rgba(45,44,45,0.75)));
            content: "";
        }

        &:after{
            position: absolute;
            right: 23px;
            height: 30px;
            width: 100%;
            background-color: rgba(38,37,38,0.75);
            z-index: -1;
            content: "";
        }
    }

    &.contact-details,&.social-details{

        span{
            float: left;
            margin: 4px 20px 0 0;
            vertical-align: middle;
            color: #cfcfcf;
        }
    }

    ul{
        float: left;
        margin: 5px 0 0 0;

        li{
            list-style: none;
            display: inline;

            a{
                float: left;
                margin: 0 15px 0 0;
                padding: 0;
                @include box-shadow(rgba(0,0,0,0.25) 2px 2px 5px);

                &:link,&:visited{
                    opacity: 0.8;
                }

                &:hover,&:active{
                    opacity: 1;
                }
            }
        }
    }

    &.company-details{
        width: 293px;
        text-align: center;
        text-transform: uppercase;

        span{
            vertical-align: middle;
        }

        h1{
            width: 232px;
            font-family: telegrafico, serif;
            font-size: 15px;
            color: #262526;
            text-shadow: 1px 1px 0px rgba(64,64,64,0.3);
            background-color: rgba(242,242,242,0.3);
            padding: 10px;
            margin: 0;
            position: relative;
            bottom: 60px;

            &:before{
                border-bottom: 38px solid rgba(242,242,242,0.3);
                border-left: 38px solid transparent;
                content:"";
                position: absolute;
                bottom: 0px;
                left: -38px;
            }

            &:after{
                border-bottom: 38px solid rgba(242,242,242,0.3);
                border-right: 38px solid transparent;
                content:"";
                position: absolute;
                bottom: 0px;
                right: -38px;
            }
        }
    }
}