如何使用HTML和CSS重新创建此导航栏？

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

How can I recreate this navigation bar using HTML and CSS?

问题

  1. <!-- 开始代码片段: js 显示: false 控制台: true Babel: false -->
  3. <!-- 语言: lang-css -->
  5.     .header {
  6.       width: 100%;
  7.       position: fixed;
  8.       top: 0;
  9.       left: 0;
  10.       z-index: 2;
  11.       opacity: 1;
  12.       display: flex;
  13.       flex-direction: row;
  14.     }
  16.     .nav-bar {
  17.       background-color: var(--nav-color );
  18.       box-sizing: border-box;
  19.       text-align: center;
  20.       height: 43px;
  21.       margin: 8px;
  22.       overflow: hidden;
  23.       border: 1.5px solid #000000;
  24.     }
  25.     .first {
  26.       position: relative;
  27.       z-index: 4;
  28.       width: 106px;
  29.       border-radius: 15px;
  30.     }
  31.     .second {
  32.       width: 100px;
  33.       position: relative;
  34.       left: -29px;
  35.       z-index: 3;
  36.       border-radius: 0 15px 15px 0;
  37.     }
  38.     .third {
  39.       width: 100px;
  40.       position: relative;
  41.       left: -60px;
  42.       z-index: 2;
  43.       border-radius: 0 15px 15px 0;
  44.     }
  46. <!-- 语言: lang-html -->
  48.     <!--===== 头部 =====-->
  49.       <header class="header">
  50.         <!--===== 导航栏 =====-->
  51.         <a href=#home class="nav-bar first"><span class="nav-bar-title">主页</span></a>
  52.         <a href=#about class="nav-bar second"><span class="nav-bar-title">关于</span></a>
  53.         <a href=#more class="nav-bar third"><span class="nav-bar-title">更多</span></a>
  54.     </header>
  56. <!-- 结束代码片段 -->
  58. [Realme文件管理器中的导航栏](https://i.stack.imgur.com/k26Jr.jpg)
  60. 我想要得到三角形状的右边缘，请告诉我如何重新创建它。
  62. 如果有类似外观的导航栏模板，请分享。
  64. 这个片段包含了我版本的HTML和CSS代码。
英文:

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

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

  1. .header {
  2.   width: 100%;
  3.   position: fixed;
  4.   top: 0;
  5.   left: 0;
  6.   z-index: 2;
  7.   opacity: 1;
  8.   display: flex;
  9.   flex-direction: row;
  10. }
  12. .nav-bar {
  13.   background-color: var(--nav-color );
  14.   box-sizing: border-box;
  15.   text-align: center;
  16.   height: 43px;
  17.   margin: 8px;
  18.   overflow: hidden;
  19.   border: 1.5px solid #000000;
  20. }
  21. .first {
  22.   position: relative;
  23.   z-index: 4;
  24.   width: 106px;
  25.   border-radius: 15px;
  26. }
  27. .second {
  28.   width: 100px;
  29.   position: relative;
  30.   left: -29px;
  31.   z-index: 3;
  32.   border-radius: 0 15px 15px 0;
  33. }
  34. .third {
  35.   width: 100px;
  36.   position: relative;
  37.   left: -60px;
  38.   z-index: 2;
  39.   border-radius: 0 15px 15px 0;
  40. }

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

  1. &lt;!--===== HEADER =====--&gt;
  2.   &lt;header class=&quot;header&quot;&gt;
  3.     &lt;!--===== NAV-BAR =====--&gt;
  4.     &lt;a href=#home class=&quot;nav-bar first&quot;&gt;&lt;span class=&quot;nav-bar-title&quot;&gt;Home&lt;/span&gt;&lt;/a&gt;
  5.     &lt;a href=#about class=&quot;nav-bar second&quot;&gt;&lt;span class=&quot;nav-bar-title&quot;&gt;About&lt;/span&gt;&lt;/a&gt;
  6.     &lt;a href=#more class=&quot;nav-bar third&quot;&gt;&lt;span class=&quot;nav-bar-title&quot;&gt;More&lt;/span&gt;&lt;/a&gt;
  7. &lt;/header&gt;

<!-- end snippet -->

navigation bar in Realme file manager

I want to get triangular shaped right edges, tell me how can I recreat it.

Share if there is any template for similar looking navigation bar.

The snippet contains the HTML and CSS code of my version,

答案1

得分: 1

也许你可以利用一些 conic-gradient()：

  1. #breadcrumb {
  2.   display: flex;
  3.   background: #f6ede4;
  4. }
  6. .item {
  7.   padding: 1em 3em 1em 2em;
  8.   background-image:
  9.     conic-gradient(
  10.       from 210deg at calc(100% - 1em) 50%,
  11.       #f6ede4 120deg,
  12.       transparent 120deg
  13.     ),
  14.     conic-gradient(
  15.       from 210deg at 100% 50%,
  16.       #ffffff 120deg,
  17.       transparent 120deg
  18.     );
  19. }

...或者在伪元素上使用 mask：

  1. #breadcrumb {
  2.   display: flex;
  3.   background: #f6ede4;
  4. }
  6. .item {
  7.   position: relative;
  8.   padding: 1em 2em;
  9. }
  11. .item::after {
  12.   content: '';
  13.   position: absolute;
  14.   top: 0;
  15.   left: 0;
  16.   height: 100%;
  17.   width: calc(100% + 1em);
  18.   background-image:
  19.     conic-gradient(
  20.       from 210deg at calc(100% - 1em) 50%,
  21.       #f6ede4 120deg,
  22.       transparent 120deg
  23.     ),
  24.     conic-gradient(
  25.       from 210deg at 100% 50%,
  26.       #ffffff 120deg,
  27.       transparent 120deg
  28.     );
  29.   -webkit-mask: conic-gradient(
  30.     from 180deg at calc(100% - 2em) 50%,
  31.     transparent 180deg,
  32.     #000 180deg
  33.   );
  34.   mask: conic-gradient(
  35.     from 180deg at calc(100% - 2em) 50%,
  36.     transparent 180deg,
  37.     #000 180deg
  38.   );
  39. }
英文:

Perhaps you can make use of some conic-gradient():

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

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

  1. #breadcrumb {
  2.   display: flex;
  3.   background: #f6ede4;
  4. }
  6. .item {
  7.   padding: 1em 3em 1em 2em;
  8.   background-image:
  9.     conic-gradient(
  10.       from 210deg at calc(100% - 1em) 50%,
  11.       #f6ede4 120deg,
  12.       transparent 120deg
  13.     ),
  14.     conic-gradient(
  15.       from 210deg at 100% 50%,
  16.       #ffffff 120deg,
  17.       transparent 120deg
  18.     );
  19. }

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

  1. &lt;div id=&quot;breadcrumb&quot;&gt;
  2.   &lt;div class=&quot;item&quot;&gt;Phone storage&lt;/div&gt;
  3.   &lt;div class=&quot;item&quot;&gt;Download&lt;/div&gt;
  4.   &lt;div class=&quot;item active&quot;&gt;Apps&lt;/div&gt;
  5. &lt;/div&gt;

<!-- end snippet -->

...or some mask on a pseudo-element:

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

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

  1. #breadcrumb {
  2.   display: flex;
  3.   background: #f6ede4;
  4. }
  6. .item {
  7.   position: relative;
  8.   padding: 1em 2em;
  9. }
  11. .item::after {
  12.   content: &#39;&#39;;
  13.   position: absolute;
  14.   top: 0;
  15.   left: 0;
  16.   height: 100%;
  17.   width: calc(100% + 1em);
  18.   background-image:
  19.     conic-gradient(
  20.       from 210deg at calc(100% - 1em) 50%,
  21.       #f6ede4 120deg,
  22.       transparent 120deg
  23.     ),
  24.     conic-gradient(
  25.       from 210deg at 100% 50%,
  26.       #ffffff 120deg,
  27.       transparent 120deg
  28.     );
  29.   -webkit-mask: conic-gradient(
  30.     from 180deg at calc(100% - 2em) 50%,
  31.     transparent 180deg,
  32.     #000 180deg
  33.   );
  34.   mask: conic-gradient(
  35.     from 180deg at calc(100% - 2em) 50%,
  36.     transparent 180deg,
  37.     #000 180deg
  38.   );
  39. }

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

  1. &lt;div id=&quot;breadcrumb&quot;&gt;
  2.   &lt;div class=&quot;item&quot;&gt;Phone storage&lt;/div&gt;
  3.   &lt;div class=&quot;item&quot;&gt;Download&lt;/div&gt;
  4.   &lt;div class=&quot;item active&quot;&gt;Apps&lt;/div&gt;
  5. &lt;/div&gt;

<!-- end snippet -->

答案2

得分: -1

  1. &lt;!-- 开始片段: js 隐藏: false 控制台: true Babel: false --&gt;
  3. &lt;!-- 语言: lang-css --&gt;
  5.     .arrow-up {
  6.       宽度: 0;
  7.       高度: 0;
  8.       边框左: 5像素 实心 透明;
  9.       边框右: 5像素 实心 透明;
  10.       边框底部: 5像素 实心 黑色;
  11.     }
  13.     .arrow-down {
  14.       宽度: 0;
  15.       高度: 0;
  16.       边框左: 20像素 实心 透明;
  17.       边框右: 20像素 实心 透明;
  18.       边框顶部: 20像素 实心 #f00;
  19.     }
  21.     .arrow-right {
  22.       宽度: 0;
  23.       高度: 0;
  24.       边框顶部: 60像素 实心 透明;
  25.       边框底部: 60像素 实心 透明;
  26.       边框左: 60像素 实心 绿色;
  27.     }
  29.     .arrow-left {
  30.       宽度: 0;
  31.       高度: 0;
  32.       边框顶部: 10像素 实心 透明;
  33.       边框底部: 10像素 实心 透明;
  34.       边框右: 10像素 实心 蓝色;
  35.     }
  37. &lt;!-- 语言: lang-html --&gt;
  39.     &lt;div class=&quot;arrow-up&quot;&gt;&lt;/div&gt;
  40.     &lt;div class=&quot;arrow-down&quot;&gt;&lt;/div&gt;
  41.     &lt;div class=&quot;arrow-left&quot;&gt;&lt;/div&gt;
  42.     &lt;div class=&quot;arrow-right&quot;&gt;&lt;/div&gt;
  44. &lt;!-- 结束片段 --&gt;
英文:

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

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

  1. .arrow-up {
  2.   width: 0;
  3.   height: 0;
  4.   border-left: 5px solid transparent;
  5.   border-right: 5px solid transparent;
  6.   border-bottom: 5px solid black;
  7. }
  9. .arrow-down {
  10.   width: 0;
  11.   height: 0;
  12.   border-left: 20px solid transparent;
  13.   border-right: 20px solid transparent;
  14.   border-top: 20px solid #f00;
  15. }
  17. .arrow-right {
  18.   width: 0;
  19.   height: 0;
  20.   border-top: 60px solid transparent;
  21.   border-bottom: 60px solid transparent;
  22.   border-left: 60px solid green;
  23. }
  25. .arrow-left {
  26.   width: 0;
  27.   height: 0;
  28.   border-top: 10px solid transparent;
  29.   border-bottom: 10px solid transparent;
  30.   border-right: 10px solid blue;
  31. }

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

  1. &lt;div class=&quot;arrow-up&quot;&gt;&lt;/div&gt;
  2. &lt;div class=&quot;arrow-down&quot;&gt;&lt;/div&gt;
  3. &lt;div class=&quot;arrow-left&quot;&gt;&lt;/div&gt;
  4. &lt;div class=&quot;arrow-right&quot;&gt;&lt;/div&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年4月13日 16:32:57
  • 转载请务必保留本文链接：https://go.coder-hub.com/76003325.html
  • css
  • html
  • navigation
匿名

发表评论

匿名网友

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

确定