遇到有人问如下效果怎么写，一时兴起，自己写一个玩玩。

看到这个样子，首先应该考虑一下 DOM 结构，以我的观点，把DOM结构设计为如下形式：

    <div>

        <img src="./img1.png" />

        <img src="./img2.png" />

        <img src="./img3.png" />

    </div>

即，一个 DIV 中包含图片，对于左侧的文字，这里考虑使用 ::before CSS实现。

首先，我们建立整个的 HTML 如下，

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta charset="utf-8" />

    <title></title>

    <style type="text/css"></style>

</head>

<body>

    <div>

        <img src="./img1.png" />

        <img src="./img2.png" />

        <img src="./img3.png" />

    </div>

</body>

</html>

我们将 like 列表的 CSS 样式命名为 like-list, 在 style 标签中添加如下代码：

.like-list {

  height: 40px;

  width: 300px;

  padding: 5px;

  border: none;

  float: right;

  background-color: lightseagreen;

  margin-right: 0;

  border-radius: 30px 0 0 30px;

}

然后，将样式附加到div，整体代码修改如下：

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta charset="utf-8" />

    <title></title>

    <style type="text/css">

    .like-list {

      height: 40px;

      width: 300px;

      padding: 5px;

      border: none;

      float: right;

      background-color: lightseagreen;

      margin-right: 0;

      border-radius: 30px 0 0 30px;

    }

</style>

</head>

<body>

    <div class="like-list">

        <img src="./img1.png" />

        <img src="./img2.png" />

        <img src="./img3.png" />

    </div>

</body>

</html>

显示效果如下：

嗯，外层效果出来了，我们再把下面几张图片下载下来，放在和HTML文件相同位置：

刷新浏览器，我们看到如下效果：

图片变得好大，调整一下，添加如下样式：

.like-list> img {

  margin: 0;

  height: 30px;

  width: 30px;

  border-radius: 30px;

  border: 3px solid white;

  margin-left: -15px;

}

再看：

嗯，有点样子了，接下来，添加文本，我们就不多创建DOM节点了，再添加如下CSS:

.like-list::before {

  height: 30px;

  width: 30px;

  content: "Like";

  color: white;

  position: relative;

  top: -15px;

  margin-right: 15px;

}

再看效果：

好了，效果出来了，全部代码如下：

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta charset="utf-8" />

    <title></title>

    <style type="text/css">

        .like-list {

            height: 35px;

            width: 300px;

            border-radius: 30px 0 0 30px;

            border: none;

            float: right;

            background-color: lightseagreen;

            margin-right: 0;

            padding: 5px;

        }

           .like-list > img {

                margin: 0;

                height: 30px;

                width: 30px;

                border-radius: 30px;

                border: 3px solid white;

                margin-left: -15px;

            }

            .like-list::before {

                height: 30px;

                width: 30px;

                content: "Like";

                color: white;

                position: relative;

                top: -15px;

                margin-right: 15px;

            }

</style>

</head>

<body>

    <div class="like-list">

        <img src="./img1.png" />

        <img src="./img2.png" />

        <img src="./img3.png" />

    </div>

</body>

</html>

总结一下，这里主要使用了 border-radius CSS设置圆角，用border设置边框，然后使用 margin-left: -15px; 进行了图片堆叠。

最近准备发奋了，要多写些东西分享了，欢迎关注下面公众号，更多文章期待与你相遇：

玩玩CSS,写一个图标堆叠效果的更多相关文章

  1. CSS写一个圣诞树Chrome浏览器小插件

    一时兴起,突然想写一个Chrome浏览器插件,不知道写啥,就写了一个圣诞树小插件.项目源码>> Chrome浏览器插件 Chrome浏览器插件最主要的是:index.html.manife ...

  2. 还在为小三角形切图？使用纯CSS写一个简单的三角形

    同学们,当美工给的设计图是这样: 或者这样: 我的内心其实是拒绝的-_-:但工作还得干,大部分同学会写 <style> .icon{width:20px;height:20px;displ ...

  3. 纯css写一个大太阳的天气图标

    效果 效果图如下 ​ 实现思路 div实现太阳的一条矩形光影 before伪元素制作另一条光影矩形,和已有的转变90° after伪元素画个圆实现太阳样式 dom结构 用两个嵌套的div容器,父容器来 ...

  4. 如何用css写一个带斜切角、有边框又有内外阴影的按钮呢？

    如果有一天,UI设计师丢过来一张UI稿,上面有这样一个带有斜切角.有边框还有内外阴影的按钮,你会怎么实现呢?第一反应切图?可是按钮内容.大小都是可变的,那得切多少图啊~Canvas?SVG?No,no ...

  5. Java-Web 用html和css写一个EasyMall注册界面

    要求: html代码: <!DOCTYPE html> <html> <head> <title>EasyMall注册页面</title> ...

  6. css 写一个向右的箭头

    经常写移动端页面时会用到向右的箭头,之前都是用图片,突然想到用css应该也能写,于是一搜还确实有 width: 7px; height: 7px; border-top: 2px solid #fff ...

  7. 前端每日实战：152# 视频演示如何用纯 CSS 创作一个圆点错觉效果

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/gBwzKR 可交互视频 此视频是可 ...

  8. css写一个梯形

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>D ...

  9. html表单——使用frameset写一个导航栏效果

    主页面: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4 ...

随机推荐

  1. sentry.event & UnhandledRejection & promise rejection

    sentry.event & UnhandledRejection & promise rejection Non-Error promise rejection captured s ...

  2. rrweb 用户操作录制和还原

    rrweb 用户操作录制和还原 demos https://www.rrweb.io/replay refs https://www.rrweb.io/ xgqfrms 2012-2020 www.c ...

  3. Electron Security All In One

    Electron Security All In One https://www.electronjs.org/docs/tutorial/security CSP Content-Security- ...

  4. Webpack 4.x 默认支持 ES6 语法

    Webpack 4.x 默认支持 ES6 语法 Q: 为什么 webpack4 默认支持 ES6 语法的压缩? A: terser 里面实现了 ES6 语法的 AST解析. webpack 4 里使用 ...

  5. js spider

    js spider https://gist.github.com/xgqfrms-GitHub/0bf82ff06037a0d1776c9f30033cbfd1 https://www.cnblog ...

  6. es6 & map & set

    es6 & map & set Map & WeakMap https://developer.mozilla.org/en-US/docs/Web/JavaScript/Re ...

  7. IDEA 敏捷开发技巧——后缀完成

    前言 "工欲善其事,必先利其器." 所以说今天来看一看如何压榨 IDEA ,让你的 IDEA 使用的更顺手! 今日技巧: 后缀完成 自定义后缀完成模版 示例 上面动图使用了 .so ...

  8. Mybatis-05 注解开发

    Mybatis-05 注解开发 注解开发 注解的核心是反射机制 面向接口编程的根本原因:解耦,可拓展,提高复用,分层开发中.上层不用管具体的实现,大家都遵守共同的标准,使得开发变得容易,规范性好. 1 ...

  9. 频繁的或者大范围的来实现数据的共享要使用Vuex

    一. Vuex 概述 1.1 组件之间共享数据的方式 由于使用频繁,通常将v-bind:属性名=" "的格式简写成:属性名=" ".兄弟组件之间的共享即不相干组 ...

  10. SpringBoot2.x中的AOP机制总结（附带demo）

    寄语:刚开始学aop的时候是大三吧,老师讲的不好,我也没学好,导致现在才有个较为清晰的认知,那个时候只知道有aop, 根部不明白aop的作用,时至今日,任然觉得aop难以咀嚼,奈何平时不用面试要用,特 ...