首页 > 代码库 > 使用css做图标

使用css做图标

2024-09-03 16:41:48   217人阅读

首先原理是：

请一步一步粘贴代码，慢慢品味。其实，很简单。。。

1.首先三角形的前身是一个普通的矩形-正方形||长方形？ok！

<div class=‘box‘></div>
.box{
        border:80px solid red;
    }

没错，使用边框属性，我们得到了一个长方形。

然后，我们弄些三角出来。

 .box{
            width:0;
            border:80px solid transparent;
            border-left:100px solid black;
        }
<div class=‘box‘></div>

你i想要哪个方向的三角，就在border上取哪个方向的就可以了。

原理：

  • 每一个对角是一个三角形。
  • 盒模型默认宽是100%;所以要归0；
  • boredr为透明，方便我们只给所需要方向的三角着色。

基于这个原理，在做一些复杂的时候，我们可以配合伪类元素生成。下面是一些好玩又简单的代码示例。

 

1.1旗帜：

技术分享

.flag {
    width: 0;
    height: 0;
    border: 20px solid #FF6600;
    border-top-width: 40px;
    border-bottom-color: transparent;
    border-bottom-width: 20px;
}
<div class=‘flag‘></div>

　　

1.2复杂的丝带~

技术分享（虽然丑……但是技术才是重点！！！！）

<!--第一，绘制一个长方形-主体-->
.ribbon {
    margin:auto;
    position: relative;
    width: 10rem;
    height: 3rem;
    padding: 0.7rem 0;
    font-size: 1.6rem !important;
    color: #fff;
    text-align: center;
    background: red;
    box-shadow:1px 1px 0 rgba(255, 233, 200, 0.5);
}

<!--2.两侧的小翅膀-->
.ribbon:before,
.ribbon:after {
    content: "";
    position: absolute;
    display: block;
    bottom: -0.6rem;
    border: 1.5rem solid gold;
    z-index: -1;
}

.ribbon:before {
    left: -2.4rem;
    border-right-width: 1.5rem;
    border-left-color: transparent;
    box-shadow: 1px 1px 0 rgba(176, 102, 166, 0.8);
}

.ribbon:after {
    right: -2.4rem;
    border-left-width: 1.5rem;
    border-right-color: transparent;
    box-shadow: 0 1px 0 rgba(176, 102, 166, 0.8);
}

<!--3.还有两个内侧的小阴影！-->
.ribbon .ribbon-content:before,
.ribbon .ribbon-content:after {
    content: "";
    position: absolute;
    display: block;
    border-style: solid;
    border-color: #bf004c transparent transparent transparent;
    bottom: -0.6rem;
}

.ribbon .ribbon-content:before {
    left: 1px;
    border-width: 0.6rem 0 0 0.6rem;
}

.ribbon .ribbon-content:after {
    right: 0;
    border-width: 0.6rem 0.6rem 0 0;
}

<div class="ribbon">
        <span class="ribbon-content">金卡会员</span>
</div>

 

使用css做图标


联系
我们