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

看到这个样子，首先应该考虑一下 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. JavaScript 注释规范

    JavaScript 注释规范 总原则 As short as possible(如无必要,勿增注释).尽量提高代码本身的清晰性.可读性. As long as necessary(如有必要,尽量详尽 ...

  2. 1GB === 1000MB & 1GB === 1024MB

    1GB === 1000MB & 1GB === 1024MB 字节单位换算 1 Gigabyte = 1000 Megabytes 1 Gibibyte = 1024 Mebibytes 十 ...

  3. GitHub Sponsors

    GitHub Sponsors https://github.com/sponsors https://github.com/sponsors/xgqfrms?preview=true https:/ ...

  4. taro 渲染 html

    taro 渲染 html https://taro-docs.jd.com/taro/next/docs/next/html.html // Taro 更推荐使用框架自带的渲染 HTML 方式 // ...

  5. js 生成Excel

    https://www.npmjs.com/package/xlsx 安装依赖 npm install xlsx Example import * as XLSX from "xlsx&qu ...

  6. 为什么建议选择居住在墨尔本CBD以南2公里内

    英国房地产公司PAUL ADAMS ARCHITECT ,简称PPA(公司编号:07635831)成立于2011年,是一家成立近十年的老牌房地产公司.PAA公司一直有着自己的房地产理念,秉持房子是用来 ...

  7. 死磕以太坊源码分析之EVM指令集

    死磕以太坊源码分析之EVM指令集 配合以下代码进行阅读:https://github.com/blockchainGuide/ 写文不易,给个小关注,有什么问题可以指出,便于大家交流学习. 以下指令集 ...

  8. Iterative learning control for linear discrete delay systems via discrete matrix delayed exponential function approach

    对于一类具有随机变迭代长度的问题,如功能性电刺激,用户可以提前结束实验过程,论文也是将离散矩阵延迟指数函数引入到状态方程中. 论文中关于迭代长度有三个定义值:\(Z^Ta\) 为最小的实验长度,\(Z ...

  9. idea 如何在新窗口中打开项目

    参考链接:https://blog.csdn.net/dreamfly88/article/details/52240188 以前一直再用eclipse,可以同时打开好几个项目,idea中同样支持打开 ...

  10. 按照阿里巴巴规范创建Java线程池

    前言 Executors Executors 是一个Java中的工具类.提供工厂方法来创建不同类型的线程池. 常用方法: 1.newSingleThreadExecutor   介绍:创建一个单线程的 ...