Skip to content

[html] 第740天 使用html简单画一个里面放有笔的笔筒 #3860

Open
@haizhilin2013

Description

@haizhilin2013
Collaborator

第740天 使用html简单画一个里面放有笔的笔筒

3+1官网

我也要出题

Activity

lxt-ing

lxt-ing commented on Apr 25, 2021

@lxt-ing

`

<title>Document</title> <style> .bitong{
        margin-top: 50px;
        width:100px;
        height:200px;
        position: fixed;
        top:50%;
        left: 50%;
        transform: translate(-50%);
        background-color: lightgreen;
    }
    .topCircle,.botCircle{
        width:100%;
        height: 50px;
        border-radius: 50%;
        background-color:#333;
        position: absolute;
        top:-25px;
        left: 0;
    }
    .botCircle{
        top:100%;
        transform: translateY(-25px);
    }
    .bitong::after{
        content:'';
        position: absolute;
        bottom:5px;
        left:50%;
        height: 120%;
        width:10px;
        background:lightblue;
        border-radius: 5px;
        transform: rotate(15deg);
        box-shadow: 1px 2px 2px;
    }
    .bitong::before{
        content:'';
        position: absolute;
        top:-21%;
        right:-15%;
        height: 10px;
        width:30px;
        background:lightblue;
        border-radius:0 5px 5px 0;
        box-shadow: 2px 1px 2px;
        z-index:999;
    }
</style>
`
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @haizhilin2013@lxt-ing

        Issue actions

          [html] 第740天 使用html简单画一个里面放有笔的笔筒 · Issue #3860 · haizlin/fe-interview