图片/图形

6种精美的纯CSS3丝带效果

阿里云


这是一组非常精美的纯 CSS3 丝带设计效果。这组丝带效果分别使用:before 和:after 伪元素来制作各种丝带,适用于要使用丝带效果的各种不同场景。

HTML 结构

这些丝带效果的 HTML 结构:使用一个<div>作为容器,在它里面放置一些<span>元素。<span>元素及其伪元素用于制作各种丝带效果。

也想出现在这里?联系我们
创客主机
  1. <div class="ribbon">
  2.   <span class="ribbon1"><span>丝带效果1</span></span>
  3. </div>
  4. <div class="ribbon">
  5.   <span class="ribbon2"><br><br><br><br>2</span>
  6. </div>
  7. <div class="ribbon">
  8.   <span class="ribbon3">丝带效果3</span>
  9. </div>
  10. <div class="ribbon">
  11.   <span class="ribbon4">丝带效果4</span>
  12. </div>
  13. <div class="ribbon">
  14.   <span class="ribbon5">丝带效果5</span>
  15. </div>
  16. <div class="ribbon">
  17.   <div class="wrap">
  18.     <span class="ribbon6">丝带效果6</span>
  19.   </div>
  20. </div>

CSS 样式

div.ribbon 是丝带的容器,丝带放置在它的上面。在例子中它被设置为内联块元素,宽度使用百分比,高度固定。采用相对定位方式,并为它设置了一张背景图片。

  1. .ribbon {
  2.   display: inline-block;
  3.   width: 48%;
  4.   height: 188px;
  5.   position: relative;
  6.   float: left;
  7.   margin-bottom: 30px;
  8.   background: url(../snow-road.jpg);
  9.   background-size: cover;
  10.   text-transform: uppercase;
  11.   color: white;
  12. }

在屏幕的最大尺寸为 500 像素时(小屏幕设备),div.ribbon 元素被设置为宽度占据整个视口的宽度。

  1. @media (max-width: 500px) {
  2.   .ribbon {width: 100%}
  3.   .ribbon:nth-child(even) {margin-right: 0%;}
  4. }

在第一种丝带效果中,外层的<span>元素.ribbon1 被设置为绝对定位方式,位于元素的右上角位置。

  1. .ribbon1 {
  2.     position: absolute;
  3.     top: -6px;
  4.     right: 10px;
  5. }

.ribbon1 元素的:after 伪元素用于制作丝带顶部的到三角形。

  1. .ribbon1:after {
  2.     position: absolute;
  3.     content: "";
  4.     display: block;
  5.     width: 0;
  6.     height: 0;
  7.     border-left: 53px solid transparent;
  8.     border-right: 53px solid transparent;
  9.     border-top: 10px solid #F8463F;
  10. }

得到如下图的效果:

.ribbon1 元素中的<span>元素用于制作丝带的主体。它是一个矩形,右上角被设置为圆角。

  1. .ribbon1 span {
  2.     position: relative;
  3.     display: inline-block;
  4.     text-align: center;
  5.     background: #F8463F;
  6.     font-size: 14px;
  7.     line-height: 1;
  8.     padding: 12px 8px 10px;
  9.     border-top-right-radius: 8px;
  10.     width: 90px;
  11. }

得到如下图的效果:

.ribbon1 span 元素的:before 伪元素用于制作丝带左上角的背景效果。

  1. .ribbon1 span:before, .ribbon1 span:after {
  2.     position: absolute;
  3.     content: "";
  4.     display: block;
  5. }
  6. .ribbon1 span:before {
  7.     background: #F8463F;
  8.     height: 6px;
  9.     width: 6px;
  10.     left: -6px;
  11.     top: 0;
  12. }

得到如下图的效果:

.ribbon1 span 元素的:after 伪元素用于制作丝带左上角的前景效果。

  1. .ribbon1 span:after {
  2.     background: #C02031;
  3.     height: 6px;
  4.     width: 8px;
  5.     border-radius: 8px 8px 0 0;
  6.     left: -8px;
  7.     top: 0;
  8. }

得到如下图的效果:

其它丝带效果的制作方法请参考下载文件。

6 种精美的纯 CSS3 丝带效果

已有 471 人购买
  • 9zpf
查看演示升级 VIP立刻购买

演示地址 下载地址
收藏
(1)

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!