css布局实现slack logo效果
代码语言:html
所属分类:布局界面
代码描述:css布局实现slack logo效果,主要采用div+nth-child
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> .slack { font-size: 10vmin; /* This controls the logo size, everything else is em's */ position: relative; width: 4.75em; height: 4.75em; } .slack div { display: block; margin-top: 1.25em; width: 2.25em; height: 1em; border-radius: 1em; position: absolute; transform-origin: 100% 100%; color: #36c5f0; background: currentColor; } .slack div::after { content: ''; width: 1em; height: 1em; position: absolute; top: -1.25em; right: 0; border-radius: 1em 1em 0 1em; background: currentColor; } .s.........完整代码请登录后点击上方下载按钮下载查看
网友评论0