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

看到这个样子，首先应该考虑一下 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. LeetCode & tree & binary tree

    LeetCode & tree & binary tree 树 & 二叉树 refs https://leetcode.com/problemset/all/?topicSlu ...

  2. WEB 面向开发者的结构化数据

    通常用于google搜索 See also: video 探索搜索库

  3. NGK算力生态建设者狂欢！SPC之后又有VAST！

    想致富,先挖矿.这句话已经成为了币圈的一句名言.挖矿一词始终贯穿着区块链以及数字加密领域. 据小道消息透露,NGK官最近将会推出两款挖矿产品---SPC星空币以及其子币VAST维萨币. 下面笔者就来一 ...

  4. NGK Global伦敦路演：“区块链+能源”必将推动世界性能源革命

    随着区块链技术的发展和应用的不断完善深入,市场的热情也开始活跃高涨,在万众期待下,NGK Global在英国伦敦的路演于7月25日圆满举办. 此次伦敦路演会议中众多行业精英,各社区代表.星盟投资公司资 ...

  5. django学习-21.优化表数据的标题展示

    目录结构 1.前言 2.表数据的标题默认展示的数据格式是[模型类名 object(主键名)]的相关信息 3.优化表数据的标题展示的数据格式是[改成我们想要展示的数据格式]的相关完整操作步骤 3.1.第 ...

  6. 2021-2-22：请你说下 CAP 理论并举例

    CAP CAP 理论是分布式系统中的一个老生常谈的理论了,最早由 Eric Brewer 在一个讲座中提出.在这个讲座中,在传统 ACID 理论以及当时比较流行但是比较抽象的的设计指导理论 BASE ...

  7. requests页面请求返回400：{"errors":{"username":"值必须是非空字符串。"}}

    我的描述:我引入requests包,携带json类型数据请求(POST)一个网站,,访问提示<Response [400]> 解决方案: 1.首先使用postman请求一模一样的数据,发现 ...

  8. 微信小程序：报错fail webview count limit exceed

    报错: 分析原因: 先从列表页面跳转到详细页面时,使用了Navigator标签,open-type默认使用的navigate,跳转时会保留当前页, <navigator class=" ...

  9. 微信小程序：app.json中通过使用扩展库userExtendedLib的方式,引入并使用weui

    微信小程序  PK  APP: 1.微信有海量⽤⼾,⽽且粘性很⾼,在微信⾥开发产品更容易触达⽤⼾:而推⼴app的成本太⾼. 2.微信小程序也可以跨平台(Android和IOS). 一.project. ...

  10. iframe页面刷新

    //方法1 document.getElementById('FrameID').contentWindow.location.reload(true); //方法2 document.getElem ...