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

看到这个样子，首先应该考虑一下 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. Code Spell Checker & VSCode 单词拼写验证

    Code Spell Checker & VSCode 单词拼写验证 https://marketplace.visualstudio.com/items?itemName=streetsid ...

  2. Linux 如何查看一个文件夹下面有多少个文件

    Linux 如何查看一个文件夹下面有多少个文件 $ tree $ find ./ -type f | wc -l $ ls -l | grep "^-" | wc -l refs ...

  3. Chrome Canary crashed bug

    Chrome Canary crashed bug Aw, Snap https://support.google.com/chrome/?p=e_awsnap clear cache, 使用隐身模式 ...

  4. js location API All In One

    js location API All In One location "use strict"; /** * * @author xgqfrms * @license MIT * ...

  5. Tailwind CSS in Action

    Tailwind CSS in Action Tailwind CSS是一个高度可定制的低级CSS框架,它为您提供了构建定制设计所需的所有构造块,而无需烦恼要覆盖的烦人的自以为是的样式 https:/ ...

  6. React PureComponent All In One

    React PureComponent All In One import React, { // useState, // useEffect, // Component, PureComponen ...

  7. Vue SSR in Action

    Vue SSR in Action https://ssr.vuejs.org/ https://ssr.vuejs.org/api/ https://ssr.vuejs.org/guide/data ...

  8. banner自用图床2

  9. Vue学习笔记-Vue.js-2.X 学习(二)===>组件化开发

    ===重点重点开始 ========================== (三) 组件化开发 1.创建组件构造器: Vue.extends() 2.注册组件: Vue.component() 3.使用 ...

  10. 文字链接Link

    效果展示: 代码展示: <el-table-column label="引流扫码人数" align="center"> <template s ...