نحوه در آوردن یک مثلث در صفحات HTML با استفاه از CSS

سلام دوستان من می خواستم یک شکلی مثل شکل زیر بکشم.

این مثلث را با استفاده از psuedo های before و after انجام می دهیم که کد کامل این قسمت را اینجا می نویسم.

البته این لینکش هست برای مشاهده تغییرات و دیدن خود کد در حال استفاده( دمو )

همانطور که در کد میبینید باید یک دیو داشته باشیم و در اون دیو با استفاده از یک دیو دیگر این مثلث را در بیاریم

اگر مسئله ای یا مشکلی داشتید منتظر نظراتتون هستم .

<div class="sidebar">
    <div class="triangle"></div>
</div>

.sidebar {
    float: right;
}
.sidebar {
    overflow: hidden;
    height: 39px;
    width:33%;
    background: transparent;
    -webkit-box-shadow: -2px 11px 14px 1px #000000;
    box-shadow: -2px 11px 14px 1px #000000;
}
.triangle:before {
    content:"";
    position: absolute;
    left: -16px;
    width: 50%;
    height: 39px;
    top: 0;
    background-color: #559acf;
    -webkit-transform: skew(40deg);
    -moz-transform: skew(40deg);
    -o-transform: skew(40deg);
    -ms-transform: skew(40deg);
    transform: skew(40deg);
}
.triangle:after {
    content:"";
    position: absolute;
    right: -16px;
    width: 50%;
    height: 39px;
    top: 0;
    z-index:50;
    background-color: #559acf;
    -webkit-transform: skew(-40deg);
    -moz-transform: skew(-40deg);
    -o-transform: skew(-40deg);
    -ms-transform: skew(-40deg);
    transform: skew(-40deg);
}
.triangle {
    height: 39px;
    background: url("../pics/bgheader.jpg");
    position: relative;
}