user3467855 user3467855 - 2 months ago 7
CSS Question

Doing shaper cornsers in css

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">
<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;
}

Answer

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">
        <a href="http://newskillsacademy.co.uk/course/ultimate-writing-course/" class="find-out-more">FIND OUT MORE</a>
      </section>
    </div>
  </div>
</div>