如何在不使用SVG的情况下重新创建2020年Google Maps图标的形状？

huangapple
go评论84阅读模式
英文:

How to recreate 2020 Google Maps icon's shape without SVG?

问题

我正在尝试重新创建Google地图的图标（2020年）。彩色背景和中间的洞看起来很容易：我只需要一些渐变和一个蒙版。

以下是显示我当前努力的代码片段（以及一个CodePen链接，如果你想尝试它）：

  1. :root {
  2.   --1-3: calc(100% / 3);
  3.   --2-3: calc(100% / 3 * 2);
  4.   --sqrt-2: 1.4142135624;
  5.   
  6.   --hole-diameter: calc(100% / var(--sqrt-2) / 3);
  7.   
  8.   --red: #ea4335;
  9.   --yellow: #fbbc04;
  10.   --green: #34a853;
  11.   --blue: #1a73e8;
  12.   --azure: #4285f4;
  13. }
  15. * {
  16.   box-sizing: border-box;
  17. }
  19. body {
  20.   margin: 0;
  21. }
  23. #wrapper {
  24.   margin: 3em auto;
  25.   width: 10em;
  26.   background: linear-gradient(90deg, #c0392b, #8e44ad);
  27. }
  29. #icon {
  30.   --mask: radial-gradient(
  31.     circle at center,
  32.     transparent calc(var(--hole-diameter) - 1px),
  33.     #000 calc(var(--hole-diameter) + 1px)
  34.   );
  35.   
  36.   border-radius: 50% 50% 50% 0;
  37.   aspect-ratio: 1 / 1;
  38.   background:
  39.     linear-gradient(
  40.       180deg,
  41.       var(--red) var(--1-3),
  42.       var(--yellow) var(--1-3) var(--2-3),
  43.       var(--green) var(--2-3)
  44.     ),
  45.     linear-gradient(
  46.       180deg,
  47.       var(--blue) var(--1-3),
  48.       var(--azure) var(--1-3) var(--2-3),
  49.       var(--green) var(--2-3)
  50.     ) calc(100% - 1px);
  51.   background-size: 50% 100%;
  52.   background-repeat: no-repeat;
  53.   -webkit-mask: var(--mask);
  54.   mask: var(--mask);
  55.   rotate: -45deg;
  56. }
  1. <div id="wrapper">
  2.   <div id="icon"></div>
  3. </div>

然而，我无法理解其独特的形状。是否可能仅使用CSS创建这样的形状？

显然，我不寻求基于SVG的解决方案。我正在做这个作为一个个人项目，所以我只需要在至少一个浏览器中能够工作的东西。

英文:

I'm trying to recreate Google Maps's icon (2020). The colorful background and the donut hole are easy enough: I just need some gradients and a mask.

Here's a snippet that shows my current efforts (and a codepen, if you want to play with it):

<!-- begin snippet: js hide: true -->

<!-- language: lang-css -->

  1. :root {
  2. --1-3: calc(100% / 3);
  3. --2-3: calc(100% / 3 * 2);
  4. --sqrt-2: 1.4142135624;
  5. --hole-diameter: calc(100% / var(--sqrt-2) / 3);
  6. --red: #ea4335;
  7. --yellow: #fbbc04;
  8. --green: #34a853;
  9. --blue: #1a73e8;
  10. --azure: #4285f4;
  11. }
  12. * {
  13. box-sizing: border-box;
  14. }
  15. body {
  16. margin: 0;
  17. }
  18. #wrapper {
  19. margin: 3em auto;
  20. width: 10em;
  21. background: linear-gradient(90deg, #c0392b, #8e44ad);
  22. }
  23. #icon {
  24. --mask: radial-gradient(
  25. circle at center,
  26. transparent calc(var(--hole-diameter) - 1px),
  27. #000 calc(var(--hole-diameter) + 1px)
  28. );
  29. border-radius: 50% 50% 50% 0;
  30. aspect-ratio: 1 / 1;
  31. background:
  32. linear-gradient(
  33. 180deg,
  34. var(--red) var(--1-3),
  35. var(--yellow) var(--1-3) var(--2-3),
  36. var(--green) var(--2-3)
  37. ),
  38. linear-gradient(
  39. 180deg,
  40. var(--blue) var(--1-3),
  41. var(--azure) var(--1-3) var(--2-3),
  42. var(--green) var(--2-3)
  43. ) calc(100% - 1px);
  44. background-size: 50% 100%;
  45. background-repeat: no-repeat;
  46. -webkit-mask: var(--mask);
  47. mask: var(--mask);
  48. rotate: -45deg;
  49. }

<!-- language: lang-html -->

  1. &lt;div id=&quot;wrapper&quot;&gt;
  2. &lt;div id=&quot;icon&quot;&gt;&lt;/div&gt;
  3. &lt;/div&gt;

<!-- end snippet -->

However, I can't wrap my head around its peculiar shape. Is it possible to create such a shape with CSS only?

It should be obvious that I'm not looking for an SVG-based solution. I'm doing this as a pet project, so I just need something that works in at least one browser.

答案1

得分: 2

这是我尽力想出的最佳方法，通过滥用多个radial-gradient、-webkit-mask-image、-webkit-mask-image-composite，不幸的是，为了实现“尖尖部分”，我使用了一个兄弟元素，而不是能够扩展原始的#icon，也不能使用::after元素（因为::after元素会被其父元素的蒙版剪裁）。

（我想这可以重新组织，使顶部的圆形部分使用::before，尖尖部分使用::after，否则#icon仅作为其两个伪元素子元素的容器和边界，但这是留给读者的练习）。

这是在Chrome中的效果。我还没有在其他浏览器中进行测试：

如何在不使用SVG的情况下重新创建2020年Google Maps图标的形状？

  1. :root {
  2.     --1-3: calc(30%);
  3.     --2-3: calc(70%);
  4.     --sqrt-2: 1.41421356237;
  5.     --inner-radius: calc(18.4%);
  7.     --red: #ea4335;
  8.     --yellow: #fbbc04;
  9.     --green: #34a853;
  10.     --blue: #1a73e8;
  11.     --azure: #4285f4;
  12. }
  14. * {
  15.     box-sizing: border-box;
  16. }
  18. body {
  19.     margin: 0;
  20. }
  22. #wrapper {
  23.     display: grid;
  24.     grid-template-columns: 1fr 1fr;
  25.     gap: 2em;
  26.     margin: 1em;
  27. }
  29. #wrapper > div {
  30.     border-radius: 1em;
  31.     background: linear-gradient(90deg, #c0392b, #8e44ad);
  32.     overflow: hidden;
  33. }
  34. #wrapper > div > h2 {
  35.     font-family: sans-serif;
  36.     text-align: center;
  37.     background-color: white;
  38.     border-radius: 0.25em;
  39.     width: 90%;
  40.     margin-left: auto;
  41.     margin-right: auto;
  42. }
  44. #image > img {
  45.     transform-origin: 50% 35%;
  46.     /*transform: rotate(50deg);*/
  47. }
  49. #icon {
  50.     aspect-ratio: 1 / 1;
  51.     background-image:
  52.         linear-gradient(
  53.             180deg,
  54.             var(--red) var(--1-3),
  55.             var(--yellow) var(--1-3) var(--2-3),
  56.             var(--green) var(--2-3)
  57.         ),
  58.         linear-gradient(
  59.             180deg,
  60.             var(--blue) var(--1-3),
  61.             var(--azure) var(--1-3) var(--2-3),
  62.             var(--green) var(--2-3)
  63.         );
  65.     background-position-x: 0, calc(100% - 1px);
  66.     background-position-y: 0, 0;
  68.     background-size: 50% 100%;
  69.     background-repeat: no-repeat;
  71.     -webkit-mask-image:
  72.     /* The radius of the circle at 100% is actually the corners of the bounding rect, not the perpendicular top+bottom/side edges, hence the weird numbers. */
  73.     radial-gradient(
  74.         circle at center,
  75.         transparent 28.2%,
  76.         black       calc(28.2% + 1px),
  77.         black       70%,
  78.         transparent calc(70.0% + 1px)
  79.     );
  81.     rotate: -50deg;
  83.     z-index: 10;
  84. }
  86. #tip {
  87.     aspect-ratio: 26 / 25;
  88.     width: 100%;
  89.     background-color: #47A756;
  90.     margin-top: -14.2%; /* this is relative to the #tip element's *width* btw. */
  91.     z-index: 5;
  92.     background-image:
  93.         linear-gradient(
  94.             130deg,
  95.             var(--yellow) 0% 25.5%,
  96.             var(--green) 25.5%
  97.         );
  99.     background-size: cover;
  100.     background-repeat: no-repeat;
  102.     -webkit-mask-repeat: no-repeat;
  103.     -webkit-mask-image:
  104.         radial-gradient(ellipse 127.3% 100% at -85.62% 60.5%, transparent 0%, transparent 100%, black 100%),
  105.         radial-gradient(ellipse 127.3% 100% at 185.62% 60.5%, transparent 0%, transparent 100%, black 100%),
  106.         linear-gradient(to bottom, black 55%, transparent 50%),
  107.         radial-gradient(ellipse 8.4% 8.8% at 50% 55%, black 100%, transparent 100%);
  109.     /* https://tympanus.net/codrops/css_reference/mask_composite/ */
  110.     -webkit-mask-composite:
  111.         source-in,
  112.         source-in,
  113.         source-over;
  114. }
  1. <div id="wrapper">
  3.   <div id="image">
  4.     <h2>Google Maps Logo SVG</h2>
  5.     <img src="https://upload.wikimedia.org/wikipedia/commons/a/aa/Google_Maps_icon_(2020).svg" alt="Google Maps icon"/>
  6.   </div>
  8.   <div id="attempt">
  9.     <h2>Image-Mask Abuse</h2>
  10.     <div id="icon"></div>
  11.     <div id="tip"></div>
  13.   </div>
  14. </div>
  2. <details>
  3. <summary>英文:</summary>
  4. Here&#39;s the best I could come up with, by abusing multiple `radial-gradient`, `-webkit-mask-image`, `-webkit-mask-image-composite` and, unfortunately: a sibling-element for the &quot;_pointy-bit_&quot; instead of being able to extend the original `#icon`, nor use an `::after` element (as the `::after` element will be clipped by the mask of its parent).
  5. (I suppose this could be re-organized to make the circular part at the top use `::before` and the pointy-bit use `::after` and otherwise have `#icon` serve only as a container and bounds for its two psedoelement children, but that&#39;s an exercise left for the reader).
  6. This is how it looks in Chrome. I haven&#39;t tested in any other browsers:
  7. [![enter image description here][1]][1]
  8. ---------------
  9. &lt;!-- begin snippet: js hide: false console: true babel: false --&gt;
  10. &lt;!-- language: lang-css --&gt;
  11. :root {
  12. --1-3: calc(30%);
  13. --2-3: calc(70%);
  14. --sqrt-2: 1.41421356237;
  15. --inner-radius: calc(18.4%);
  16. --red: #ea4335;
  17. --yellow: #fbbc04;
  18. --green: #34a853;
  19. --blue: #1a73e8;
  20. --azure: #4285f4;
  21. }
  22. * {
  23. box-sizing: border-box;
  24. }
  25. body {
  26. margin: 0;
  27. }
  28. #wrapper {
  29. display: grid;
  30. grid-template-columns: 1fr 1fr;
  31. gap: 2em;
  32. margin: 1em;
  33. }
  34. #wrapper &gt; div {
  35. border-radius: 1em;
  36. background: linear-gradient(90deg, #c0392b, #8e44ad);
  37. overflow: hidden;
  38. }
  39. #wrapper &gt; div &gt; h2 {
  40. font-family: sans-serif;
  41. text-align: center;
  42. background-color: white;
  43. border-radius: 0.25em;
  44. width: 90%;
  45. margin-left: auto;
  46. margin-right: auto;
  47. }
  48. #image &gt; img {
  49. transform-origin: 50% 35%;
  50. /*transform: rotate(50deg);*/
  51. }
  52. #icon {
  53. aspect-ratio: 1 / 1;
  54. background-image:
  55. linear-gradient(
  56. 180deg,
  57. var(--red) var(--1-3),
  58. var(--yellow) var(--1-3) var(--2-3),
  59. var(--green) var(--2-3)
  60. ),
  61. linear-gradient(
  62. 180deg,
  63. var(--blue) var(--1-3),
  64. var(--azure) var(--1-3) var(--2-3),
  65. var(--green) var(--2-3)
  66. );
  67. background-position-x: 0, calc(100% - 1px);
  68. background-position-y: 0, 0;
  69. background-size: 50% 100%;
  70. background-repeat: no-repeat;
  71. -webkit-mask-image:
  72. /* The radius of the circle at 100% is actually the corners of the bounding rect, not the perpendicular top+bottom/side edges, hence the weird numbers. */
  73. radial-gradient(
  74. circle at center,
  75. transparent 28.2%,
  76. black       calc(28.2% + 1px),
  77. black       70%,
  78. transparent calc(70.0% + 1px)
  79. );
  80. rotate: -50deg;
  81. z-index: 10;
  82. }
  83. #tip {
  84. aspect-ratio: 26 / 25;
  85. width: 100%;
  86. background-color: #47A756;
  87. margin-top: -14.2%; /* this is relative to the #tip element&#39;s *width* btw. */
  88. z-index: 5;
  89. background-image:
  90. linear-gradient(
  91. 130deg,
  92. var(--yellow) 0% 25.5%,
  93. var(--green) 25.5%
  94. );
  95. background-size: cover;
  96. background-repeat: no-repeat;
  97. -webkit-mask-repeat: no-repeat;
  98. -webkit-mask-image:
  99. radial-gradient( ellipse 127.3% 100% at -85.62% 60.5%, transparent 0%, transparent 100%, black 100% ),
  100. radial-gradient( ellipse 127.3% 100% at 185.62% 60.5%, transparent 0%, transparent 100%, black 100% ),
  101. linear-gradient( to bottom, black 55%, transparent 50% ),
  102. radial-gradient( ellipse 8.4% 8.8% at 50% 55%, black 100%, transparent 100% );
  103. /* https://tympanus.net/codrops/css_reference/mask-composite/ */
  104. -webkit-mask-composite:
  105. source-in,
  106. source-in,
  107. source-over;
  108. }
  109. &lt;!-- language: lang-html --&gt;
  110. &lt;div id=&quot;wrapper&quot;&gt;
  111. &lt;div id=&quot;image&quot;&gt;
  112. &lt;h2&gt;Google Maps Logo SVG&lt;/h2&gt;
  113. &lt;img src=&quot;https://upload.wikimedia.org/wikipedia/commons/a/aa/Google_Maps_icon_(2020).svg&quot; alt=&quot;Google Maps icon&quot;/&gt;
  114. &lt;/div&gt;
  115. &lt;div id=&quot;attempt&quot;&gt;
  116. &lt;h2&gt;Image-Mask Abuse&lt;/h2&gt;
  117. &lt;div id=&quot;icon&quot;&gt;&lt;/div&gt;
  118. &lt;div id=&quot;tip&quot;&gt;&lt;/div&gt;
  119. &lt;/div&gt;
  120. &lt;/div&gt;
  121. &lt;!-- end snippet --&gt;
  122. [1]: https://i.stack.imgur.com/eujIk.png
  123. </details>
  124. # 答案2
  125. **得分**: 2
  126. 以下是您要翻译的内容：
  127. ```html
  128. 一个在所有浏览器中应该有效的具有一个元素的近似方法：
  129. &lt;!-- 开始代码片段：js 隐藏：false 控制台：true babel：false --&gt;
  130. &lt;!-- 语言：lang-css --&gt;
  131. .logo {
  132. width: 200px; /* 控制大小 */
  133. aspect-ratio: .7;
  134. background:
  135. linear-gradient(130deg,#0000 53%,#34a853 53.5%),
  136. conic-gradient(from 40deg at 36% 26%, #4285f4 25%,#fbbc04 0 50%,#ea4335 0 75%, #1a73e8 0);
  137. -webkit-mask:
  138. radial-gradient(#000 69%,#0000 71%) 
  139. bottom/10% 9% no-repeat,
  140. radial-gradient(92% 173% at 100% 116%,#0000 98%,#000) 
  141. 100% 97%/50% 18% no-repeat,
  142. radial-gradient(92% 173% at 0%   116%,#0000 98%,#000) 
  143. 0%   97%/50% 18% no-repeat,
  144. conic-gradient(from -35deg at 50% 90%,#000 70deg,#0000 0)
  145. bottom/100% 43% no-repeat,
  146. radial-gradient(#0000 27%,#000 28% 70%,#0000 71%)
  147. top   /100% 70% no-repeat;
  148. display: inline-block;
  149. }
  150. html {
  151. min-height: 100%;
  152. background: repeating-linear-gradient(-45deg, #fff 0 20px, #f9f9f9 0 40px);
  153. text-align: center;
  154. }
  155. &lt;!-- 语言：lang-html --&gt;
  156. &lt;div class=&quot;logo&quot;&gt;&lt;/div&gt;
  157. &lt;img src=&quot;https://upload.wikimedia.org/wikipedia/commons/a/aa/Google_Maps_icon_(2020).svg&quot; width=&quot;200&quot;&gt;
  158. &lt;!-- 结束代码片段 --&gt;

请注意，这里只包括了代码部分，没有翻译代码部分之外的内容。

英文:

An approximation with one element that should work in all the browsers:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. .logo {
  2. width: 200px; /* control the size */
  3. aspect-ratio: .7;
  4. background:
  5. linear-gradient(130deg,#0000 53%,#34a853 53.5%),
  6. conic-gradient(from 40deg at 36% 26%, #4285f4 25%,#fbbc04 0 50%,#ea4335 0 75%, #1a73e8 0);
  7. -webkit-mask:
  8. radial-gradient(#000 69%,#0000 71%) 
  9. bottom/10% 9% no-repeat,
  10. radial-gradient(92% 173% at 100% 116%,#0000 98%,#000) 
  11. 100% 97%/50% 18% no-repeat,
  12. radial-gradient(92% 173% at 0%   116%,#0000 98%,#000) 
  13. 0%   97%/50% 18% no-repeat,
  14. conic-gradient(from -35deg at 50% 90%,#000 70deg,#0000 0)
  15. bottom/100% 43% no-repeat,
  16. radial-gradient(#0000 27%,#000 28% 70%,#0000 71%)
  17. top   /100% 70% no-repeat;
  18. display: inline-block;
  19. }
  20. html {
  21. min-height: 100%;
  22. background: repeating-linear-gradient(-45deg, #fff 0 20px, #f9f9f9 0 40px);
  23. text-align: center;
  24. }

<!-- language: lang-html -->

  1. &lt;div class=&quot;logo&quot;&gt;&lt;/div&gt;
  2. &lt;img src=&quot;https://upload.wikimedia.org/wikipedia/commons/a/aa/Google_Maps_icon_(2020).svg&quot; width=&quot;200&quot;&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年6月22日 19:23:05
  • 转载请务必保留本文链接：https://go.coder-hub.com/76531374.html
  • css
  • css-shapes
  • html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定