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

看到这个样子，首先应该考虑一下 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. multi selects & mutually exclusive

    multi selects & mutually exclusive 互斥 selects import React, { useState, // useEffect, // useRef, ...

  2. 对DevOps的九大误解，是时候纠正了！

    DevOps是开发和运维的结合,有助于集成和自动化测试过程以及部署存储库,还提供了透明度以及灵活性.DevOps的目标如下: ●更快的上市时间(TTM). ●减少各种修复之间的前置时间.●提高部署频率 ...

  3. 14_MySQL条件查询

    本节所涉及的sql语句: -- 去除结果集中的重复记录 SELECT job FROM t_emp; SELECT DISTINCT job FROM t_emp; SELECT DISTINCT j ...

  4. JUC并发编程学习笔记

    JUC并发编程学习笔记 狂神JUC并发编程 总的来说还可以,学到一些新知识,但很多是学过的了,深入的部分不多. 线程与进程 进程:一个程序,程序的集合,比如一个音乐播发器,QQ程序等.一个进程往往包含 ...

  5. 一文学会Dockerfile语法

    接应上篇,续讲前文.今天咱来聊一下Dockerfile的使用 . 虽然可以通过docker commit命令来手动创建镜像,但是通过Dockerfile文件,可以帮助我们自动创建镜像,并且能够自定义创 ...

  6. Echars统计图的使用

    第一步去官网挑选自己需要的图形了. 官网地址:https://echarts.baidu.com/ 第二步按照官网的demo,下载需要的js组件并放到自己的项目中. 第三步仿照demo创建需要的div ...

  7. 基于μcOS-II实时操作系统源码实现RMS和EDF调度（共享资源）

    μcOS-II多任务实验报告(RMS.EDF调度) 目录 μcOS-II多任务实验报告(RMS.EDF调度) 一.实验概述 二.环境搭建 三.代码分析 四.实验步骤 1 给TCB块添加扩展 2 创建并 ...

  8. 使用gitlab构建基于docker的持续集成（三）

    使用gitlab构建基于docker的持续集成(三) gitlab docker aspnetcore 持续集成 构建发布思路: aspnetcore 下的dockerfile编写 发布docker- ...

  9. AXU2CGB开发板验证Vitis加速基本平台创建

    Vitis 加速基本平台创建 1.Vivado 工程创建,硬件平台bd 图如下所示 1.1.双击Block图中ZYNQ核,配置相关参数 1.1.1.Low Speed 配置,在 I/O Configu ...

  10. 看动画轻松学会 Raft 算法

    由于 Paxos 算法过于晦涩难懂且难以实现,Diego Ongaro 提出了一种更易于理解和实现并能等价于 Paxos 算法的共识算法 - Raft 算法. 因为 Raft 算法清晰易懂越来越多的开 ...