Doing shaper cornsers in css - html

Question

I am trying to do sharp corners in css, it works only 50%, if you check the jsfiddle you will notice that on border top left and top right on the blue ribbon banner a remaining border which should not be there. How can I remove that border?
http://jsfiddle.net/XSs9L/699/
HTML
<div class="wrap_post_course">
<div class="ribbon_banner mega_course"><span class="name_type"><span class="tl"></span><span class="tr"></span>MEGA COURSES</span>
</div>
<div class="post_item post_item_courses post_item_courses_3 post_format_standard odd">
<div class="course-preview -course post_content ih-item colored square effect_dir left_to_right">
<div class="course-image post_featured img">
<a href="http://newskillsacademy.co.uk/course/ultimate-writing-course/"><img width="331" height="166" sizes="(max-width: 331px) 100vw, 331px" srcset="http://newskillsacademy.co.uk/wp-content/uploads/2016/04/writing-course-1-331x166.jpg 331w, http://newskillsacademy.co.uk/wp-content/uploads/2016/04/writing-course-1-75x39.jpg 75w"
alt="Writing Course" class="attachment-homepage-thumb size-homepage-thumb wp-post-image" src="http://newskillsacademy.co.uk/wp-content/uploads/2016/04/writing-course-1-331x166.jpg"></a>
</div>
<div class="course-meta">
<header class="course-header">
<h5 class="nomargin">The Ultimate Writing Course</h5>
</header>
</div>
<div class="course-price product-price">
<div class="price-text"><del><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">£</span>598.00</span></del> <ins><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">£</span>399.00</span></ins></div>
</div>
<section class="find-more-now">
FIND OUT MORE
</section>
</div>
</div>
</div>
CSS
.ribbon_banner {
float: right;
position: relative;
width: 75px;
z-index: 99;
}
.ribbon_banner span.name_type {
background: #17a9ce none repeat scroll 0 0;
box-shadow: 0 3px 5px -7px rgba(0, 0, 0, 1);
color: #fff;
display: block;
font-size: 16px;
font-weight: bold;
line-height: 20px;
margin-left: -50px;
margin-top: 29px;
padding: 5px;
position: absolute;
text-align: center;
text-transform: uppercase;
transform: rotate(45deg);
width: 152px;
}
.ribbon_banner span.name_type:before {
content: "";
position: absolute;
left: 0px;
top: 100%;
z-index: -1;
border-color: #17a9ce transparent transparent #17a9ce;
border-style: solid;
border-width: 3px;
}
.ribbon_banner span.name_type:after {
content: "";
position: absolute;
right: 0px;
top: 100%;
z-index: -1;
border-color: #17a9ce transparent transparent #17a9ce;
border-style: solid;
border-width: 3px;
}
.ribbon_banner .tl,
.ribbon_banner .tr,
.ribbon_banner .bl,
.ribbon_banner .br {
width: 0;
height: 0;
position: absolute;
}
.ribbon_banner .tl {
top: 0;
left: 0;
border-top: 24px solid #f4f7f9;
border-right: 24px solid transparent;
}
.ribbon_banner .tr {
top: 0;
right: 0;
border-top: 24px solid #f4f7f9;
border-left: 24px solid transparent;
}
.wrap_post_course {
display: inline-block;
margin: 40px;
width: 335px;
}

Answer 1

it seems to be a bug when rendering a rotated element because there is no such effect when the degree is 0. So I suggest to move .tr and .tl one pixel outer to wrap the effect.
.ribbon_banner {
float: right;
position: relative;
width: 75px;
z-index: 99;
}
.ribbon_banner span.name_type {
background: #17a9ce none repeat scroll 0 0;
box-shadow: 0 3px 5px -7px rgba(0, 0, 0, 1);
color: #fff;
display: block;
font-size: 16px;
font-weight: bold;
line-height: 20px;
margin-left: -50px;
margin-top: 29px;
padding: 5px;
position: absolute;
text-align: center;
text-transform: uppercase;
transform: rotate(45deg);
width: 152px;
}
.ribbon_banner span.name_type:before {
content: "";
position: absolute;
left: 0px;
top: 100%;
z-index: -1;
border-color: #17a9ce transparent transparent #17a9ce;
border-style: solid;
border-width: 3px;
}
.ribbon_banner span.name_type:after {
content: "";
position: absolute;
right: 0px;
top: 100%;
z-index: -1;
border-color: #17a9ce transparent transparent #17a9ce;
border-style: solid;
border-width: 3px;
}
.ribbon_banner .tl,
.ribbon_banner .tr,
.ribbon_banner .bl,
.ribbon_banner .br {
width: 0;
height: 0;
position: absolute;
}
.ribbon_banner .tl {
top: -1px;
left: -1px;
border-top: 24px solid #f4f7f9;
border-right: 24px solid transparent;
}
.ribbon_banner .tr {
top: -1px;
right: -1px;
border-top: 24px solid #f4f7f9;
border-left: 24px solid transparent;
}
.wrap_post_course {
display: inline-block;
margin: 40px;
width: 335px;
}
<div class="wrap_post_course">
<div class="ribbon_banner mega_course"><span class="name_type"><span class="tl"></span><span class="tr"></span>MEGA COURSES</span>
</div>
<div class="post_item post_item_courses post_item_courses_3 post_format_standard odd">
<div class="course-preview -course post_content ih-item colored square effect_dir left_to_right">
<div class="course-image post_featured img">
<a href="http://newskillsacademy.co.uk/course/ultimate-writing-course/"><img width="331" height="166" sizes="(max-width: 331px) 100vw, 331px" srcset="http://newskillsacademy.co.uk/wp-content/uploads/2016/04/writing-course-1-331x166.jpg 331w, http://newskillsacademy.co.uk/wp-content/uploads/2016/04/writing-course-1-75x39.jpg 75w"
alt="Writing Course" class="attachment-homepage-thumb size-homepage-thumb wp-post-image" src="http://newskillsacademy.co.uk/wp-content/uploads/2016/04/writing-course-1-331x166.jpg"></a>
</div>
<div class="course-meta">
<header class="course-header">
<h5 class="nomargin">The Ultimate Writing Course</h5>
</header>
</div>
<div class="course-price product-price">
<div class="price-text"><del><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">£</span>598.00</span></del> <ins><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">£</span>399.00</span></ins></div>
</div>
<section class="find-more-now">
FIND OUT MORE
</section>
</div>
</div>
</div>