2
我想在css中做尖角，它只有50％的效果，如果你檢查jsfiddle，你會注意到在藍色的絲帶橫幅上邊框左上角和右上角的剩餘邊框應該不在那裏。我怎樣才能刪除邊框？在css中做整形加工者
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">
<a href="http://newskillsacademy.co.uk/course/ultimate-writing-course/" class="find-out-more">FIND OUT MORE</a>
</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;
}
不可信。感謝您的回答。 – user3467855