Question

我正在尝试在css中做尖角，它只能工作50％，如果你检查jsfiddle你会注意到在蓝色丝带横幅上的左上角和右上角有一个不应该存在的剩余边框。如何删除该边框？

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 1

渲染旋转元素时似乎是一个错误，因为当度为0时没有这样的效果。所以我建议将.tr和.tl移动一个像素外部以包裹效果。

.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>

Answer 2

希望您在这里寻找的是jsfiddle链接。 http://jsfiddle.net/XSs9L/700/

在css做成型玉米角

2 个答案: