温馨提示:本文翻译自stackoverflow.com，查看原文请点击：linear gradients - How can I code this menu icon with only CSS and one element?

css linear-gradients

linear gradients - 如何仅使用CSS和一个元素来编码此菜单图标？

发布于 2020-03-27 11:35:43

到目前为止，我已经尝试过了。

body {
  margin:0;
  padding:20px;
  background-color: #000;
}

.mobil-menu__icon {
  height: 50px;
  width: 50px;
  background: 
    linear-gradient(to bottom, #fff 0%, #fff 20%, transparent 20%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, transparent 40%, #fff 40%, #fff 60%, transparent 60%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, transparent 80%, #fff 80%, #fff 100%);
}

<div class="mobil-menu__icon"></div>

提问者

dgknca

被浏览

24

查看英文版

查看原文

Temani Afif 2019-07-04 04:53

仅在渐变中使用纯色，并依靠background-size：

.mobil-menu__icon {
  height: 50px;
  width: 50px;
  background:
    /*                         position    / width height */
    linear-gradient(#fff,#fff) top    left / 100%  20%,
    linear-gradient(#fff,#fff) center left / 80%   20%,
    linear-gradient(#fff,#fff) bottom left / 60%   20%,
    red;
  border:10px solid red;
  background-repeat:no-repeat; /* Never forget this! */
}

<div class="mobil-menu__icon"></div>

使用悬停动画：

.mobil-menu__icon {
  height: 50px;
  width: 50px;
  background:
    linear-gradient(#fff,#fff) top    left,
    linear-gradient(#fff,#fff) center left,
    linear-gradient(#fff,#fff) bottom left,
    red;
  background-size:
    100% 20%,
    80%  20%,
    60%  20%;
  border:10px solid red;
  background-repeat:no-repeat;
  transition:0.3s all;
}
.mobil-menu__icon:hover {
  background-size:100% 20%;
}

<div class="mobil-menu__icon"></div>

如果您想要透明：

.mobil-menu__icon {
  height: 50px;
  width: 50px;
  background:
    linear-gradient(red,red) 0    calc(1*100%/4) / 100%  20%,
    linear-gradient(red,red) 0    calc(3*100%/4) / 100%  20%,
    
    linear-gradient(red,red) 100% calc(2*100%/4) / 20%  20%,
    linear-gradient(red,red) 100% calc(4*100%/4) / 40%  20%;
  border:10px solid red;
  background-repeat:no-repeat; 
}

body {
  background:repeating-linear-gradient(to right,white 0 5px,grey 10px);
}

<div class="mobil-menu__icon"></div>

您的代码也几乎不错，但是缺少大小和重复项：

body {
  margin: 0;
  padding: 20px;
  background-color: #000;
}

.mobil-menu__icon {
  height: 50px;
  width: 50px;
  background: 
    linear-gradient(to bottom, #fff 0%, #fff 20%, transparent 20%, transparent 100%), 
    linear-gradient(to bottom, transparent 0%, transparent 40%, #fff 40%, #fff 60%, transparent 60%, transparent 100%), 
    linear-gradient(to bottom, transparent 0%, transparent 80%, #fff 80%, #fff 100%);
   background-size:100% 100%,80% 100%, 60% 100%;
   background-repeat:no-repeat;
}

<div class="mobil-menu__icon"></div>

相关问题以获取有关不同值的更多详细信息：使用百分比值和线性渐变的背景位置

热门帖子

1

华中科大的计算机技术的在职硕士，职场认可度如何？

2

十兆宽带 100 块钱一个月我是活在 80 年代吗？

3

关于高质量屏幕共享的问题

4

我是真的受不了打小报告的三八了！

5

怎么管理自己的文件体系

6

[开发者自荐] AirBattery: 在 Mac 端获取所有设备的电量并显示在 Dock 或状态栏上

7

南京移动 IPV6 被停

8

WireGuard 跨国组网失败后,一个新工具的诞生

9

你的 IDEA(2024.1) 在 macOS 上崩吗？

10

居家办公兼谈普通人的无聊和解救方式

相关问题

1

CSS：背景图片上的背景色

2

创建加载消息，这些消息将根据 shiny 的应用程序中情节的加载时间而改变

3

内部元素的CSS选择器

4

使用CSS将背景隐藏在属于其他域的iframe中

5

如何定义随浏览器缩放级别缩放的字体大小？

6

圆角边界

7

div中的p标签会影响相邻div的位置

8

下拉导航菜单显示在右侧并水平堆叠

9

调整窗口大小时为什么会被切断？

10

以增加的间距在vuetify网格中将v-col的n个中心居中

热门github

1

Implementation of paper - YOLOv9: Learning What You Want to Learn Using Programmable Gradient Information (翻译：论文实现——YOLOv9: Learning What You Want to Learn using Programmable Gradient Information（利用可编程梯度信息学习您想学的内容）)

2

A Windows and Office activator using HWID / Ohook / KMS38 / Online KMS activation methods, with a focus on open-source code and fewer antivirus detections. (翻译：使用 HWID / KMS38 / Online KMS 激活方法激活 Microsoft 产品的脚本集合，重点是开源代码、较少的防病毒检测和用户友好性。)

3

Get up and running with Llama 2, Mistral, Gemma, and other large language models. (翻译：启动并运行 Llama 2、Mistral、Gemma 和其他大型语言模型。)

4

该项目可以让你通过订阅的方式使用Cloudflare WARP+，自动获取流量。This project enables you to use Cloudflare WARP+ through subscription, automatically acquiring traffic.

5

Multi functional app to find duplicates, empty folders, similar images etc. (翻译：多功能应用程序可查找重复项、空文件夹、相似图像等。)

6

Xray panel supporting multi-protocol multi-user expire day & traffic & ip limit (Vmess & Vless & Trojan & ShadowSocks & Wireguard) (翻译：Xray面板支持多协议多用户到期日&流量&IP限制（Vmess & Vless & Trojan & ShadowSocks & Wireguard)

7

The Free Software Media System (翻译：Jellyfin 是一个免费软件媒体系统，可让您控制管理和流式传输您的媒体。它是专有 Emby 和 Plex 的替代方案，通过多个应用程序从专用服务器向最终用户设备提供媒体。)

8

lightweight, standalone C++ inference engine for Google's Gemma models. (翻译：适用于 Google Gemma 模型的轻量级独立 C++ 推理引擎。)

9

📚 Freely available programming books (翻译：📚 免费提供的编程书籍)

10

A collective list of free APIs (翻译：免费 API 的集合列表)

11

1️⃣🐝🏎️ The One Billion Row Challenge -- A fun exploration of how quickly 1B rows from a text file can be aggregated with Java (翻译：十亿行挑战 —— 使用 Java 对文本文件中的 10 亿行数据进行聚合的有趣探索)

12

🎓 Path to a free self-taught education in Computer Science! (翻译：🎓计算机科学免费自学教程！)

13

Curso para aprender el lenguaje de programación Python desde cero y para principiantes. 75 clases, 37 horas en vídeo, código, proyectos y grupo de chat. Fundamentos, frontend, backend, testing, IA... (翻译：从零开始学习 Python 编程语言的课程，适合初学者)

14

This repository contains System Design resources which are useful while preparing for interviews and learning Distributed Systems (翻译：该存储库包含系统设计资源，在准备面试和学习分布式系统时非常有用)

15

Mamba is a new state space model architecture showing promising performance on information-dense data such as language modeling, where previous subquadratic models fall short of Transformers. It is based on the line of progress on structured state space models, with an efficient hardware-aware design and implementation in the spirit of FlashAttention. (翻译：Mamba 是一种新的状态空间模型架构，在信息密集型数据（例如语言建模）上显示出良好的性能，而之前的二次模型在 Transformers 方面存在不足。它基于结构化状态空间模型的进展，并本着FlashAttention的精神进行高效的硬件感知设计和实现。)