zoukankan      html  css  js  c++  java
  • 41.纯 CSS 绘制一支栩栩如生的铅笔

    原文地址: https://segmentfault.com/a/1190000015153865

    感想: 不难

    HTML code:

    <div class="pencil">
        <!-- taper : 笔尖 -->
        <span class="taper"></span>
        <!--barrel : 笔筒 -->
        <span class="barrel">Think Different</span>
        <!--eraser : 橡皮擦 -->
        <span class="eraser"></span>
    </div>

    CSS code:

    html, body {
        margin: 0;
        padding: 0;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: lightskyblue;
    }
    .pencil{
        position: relative;
        font-size: 10px;
        width: 50em;
        height: 3.5em;
        filter: drop-shadow(5px 10px 3px gray);
    }
    /* 笔筒完成 */
    .pencil .barrel{
        position: absolute;
        width: 40em;
        left: 4em;
        background-color: green;
        border-top: 1em solid forestgreen;
        border-bottom: 1em solid darkgreen;
        color: silver;
        line-height: 1.5em;
        text-align: center;
        text-transform: uppercase;
        letter-spacing: 0.1em;
    }
    /* 笔尖 边框四部分中右边那部分*/
    .pencil .taper::before,
    .pencil .taper::after{
        content: '';
        position: absolute;
        left: -4em;
        border-style: solid;
        border-width: calc(3.5em / 2) 4em;
    }
    .pencil .taper::before{
        /* transparent : 透明的 ; biak*/
        border-color: transparent burlywood transparent transparent;
    }
    .pencil .taper::after{
        border-color: transparent black transparent transparent;
        transform: scale(0.3);
    }
    /* 橡皮擦 */
    .pencil .eraser{
        position: absolute;
        right: 0;
        width: 6em;
        height: 1.5em;
        background-color: lightpink;
        border-top: 1em solid pink;
        border-bottom: 1em solid lightcoral;
        border-top-right-radius: 0.5em;
        border-top-right-radius: 0.5em;
    }
    .pencil .eraser::before{
        content: '';
        position: absolute;
        top: -1em;
        left: 0;
        width: 1.5em;
        height: 1.5em;
        background-color: silver;
        border-top: 1em solid lightgray;
        border-bottom: 1em solid gray;
    }
  • 相关阅读:
    Object.keys
    数组内容深拷贝的应用
    CSS如何让页脚固定在页面底部
    vue eslint开发 关掉 tab错误提示
    input框,需要隐式显示的时候,不让它自动填充的办法
    关于BFC
    File协议与HTTP协议 以及区别
    关于缓存
    深拷贝浅拷贝 遇到了bug
    聚餐学习
  • 原文地址:https://www.cnblogs.com/FlyingLiao/p/10434557.html
Copyright © 2011-2022 走看看