CSS带尖底的矩形

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

CSS Rectangle with pointy bottom

问题

如何创建一个类似这样的步进器？我尝试使用clip-path重新创建它们，但只成功制作了水平的，而不是垂直的。我尝试了很多方法，但在撰写此代码时，这段代码是我最新的尝试。我需要它在li元素之前，所以我尝试使用::before，但箭头指向右侧，看起来更像播放按钮而不是步进器。

片段

  1. .wrapper {
  2.   height: 100vh;
  3.   width: 100%;
  4.   display: flex;
  5.   align-items: center;
  6.   justify-content: center;
  7. }
  9. .steps {
  10.   position: relative;
  11.   height: 80%;
  12.   width: 75%;
  13.   .step {
  14.     height: 80px;
  15.     display: flex;
  16.     align-items: center;
  17.     &::before {
  18.       content: "";
  19.       background: red;
  20.       height: 110%;
  21.       width: 15px;
  22.       margin: 0 2rem;
  23.       clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 100%, 25% 50%, 0% 50%);
  24.     }
  25.   }
  26. }
  1. <div class="steps">
  2.   <div class="step">
  3.     <p class="step-text">这是一步</p>
  4.   </div>
  5.   <div class="step">
  6.     <p class="step-text">这是一步</p>
  7.   </div>
  8.   <div class="step">
  9.     <p class="step-text">这是一步</p>
  10.   </div>
  11. </div>

如果您需要进一步的帮助，请随时提问。

英文:

How would you create a stepper like this? I tried recreating those with clip-path but only managed to make them horizontal not vertical. I've tried many thing but at the time of writing this, this code is the latest try I've made I need it to be before an li so I tried with the ::before but the arrow pointed to the right and looked more like a play button more than anything.

CSS带尖底的矩形

Snippet

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

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

  1. .wrapper {
  2.   height: 100vh;
  3.   width: 100%;
  4.   display: flex;
  5.   align-items: center;
  6.   justify-content: center;
  7. }
  9. .steps {
  10.   position: relative;
  11.   height: 80%;
  12.   width: 75%;
  13.   .step {
  14.     height: 80px;
  15.     display: flex;
  16.     align-items: center;
  17.     &amp;::before {
  18.       content: &quot;&quot;;
  19.       background: red;
  20.       height: 110%;
  21.       width: 15px;
  22.       margin: 0 2rem;
  23.       clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 100%, 25% 50%, 0% 50%);
  24.     }
  25.   }
  26. }

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

  1. &lt;div class=&quot;steps&quot;&gt;
  2.   &lt;div class=&quot;step&quot;&gt;
  3.     &lt;p class=&quot;step-text&quot;&gt;This is a step&lt;/p&gt;
  4.   &lt;/div&gt;
  5.   &lt;div class=&quot;step&quot;&gt;
  6.     &lt;p class=&quot;step-text&quot;&gt;This is a step&lt;/p&gt;
  7.   &lt;/div&gt;
  8.   &lt;div class=&quot;step&quot;&gt;
  9.     &lt;p class=&quot;step-text&quot;&gt;This is a step&lt;/p&gt;
  10.   &lt;/div&gt;
  11. &lt;/div&gt;
  12. &lt;/div&gt;

<!-- end snippet -->

答案1

得分: 1

使用 calc CSS 函数修复你的剪切路径：

  1. .step{
  2.   height: 3rem;
  3.   display: flex;
  4.   align-items: center;
  5.   margin: 2px 0;
  6. }
  8. .step::before{
  10.   --size: 0.4rem;
  11.   
  12.   content: "";
  13.   background: #6ea639;
  14.   height: calc(100% + var(--size));
  15.   width: calc(var(--size) * 2);
  16.   margin: 0 1rem 0 0;
  17.   
  18.   clip-path: polygon(
  19.     0% 0%,                         /* 左上角 */
  20.     50% var(--size),               /* 顶部中间 */
  21.     100% 0%,                       /* 右上角 */
  22.     100% calc(100% - var(--size)), /* 右下角 */
  23.     50% 100%,                      /* 底部中间 */
  24.     0% calc(100% - var(--size))    /* 左下角 */
  25.   );
  26. }

更多信息：使用剪切路径创建带形状的带子

英文:

Fix your clip-path by using calc CSS function:

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

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

  1. .step{
  2.   height: 3rem;
  3.   display: flex;
  4.   align-items: center;
  5.   margin: 2px 0;
  6. }
  8. .step::before{
  10.   --size: 0.4rem;
  11.   
  12.   content: &quot;&quot;;
  13.   background: #6ea639;
  14.   height: calc(100% + var(--size));
  15.   width: calc(var(--size) * 2);
  16.   margin: 0 1rem 0 0;
  17.   
  18.   clip-path: polygon(
  19.     0% 0%,                         /* Top left */
  20.     50% var(--size),               /* Top center */
  21.     100% 0%,                       /* Top right */
  22.     100% calc(100% - var(--size)), /* Bottom right */
  23.     50% 100%,                      /* Bottom center */
  24.     0% calc(100% - var(--size))    /* Bottom left */
  25.   );
  26. }

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

  1. &lt;div class=&quot;steps&quot;&gt;
  2.   &lt;div class=&quot;step&quot;&gt;This is a step&lt;/div&gt;
  3.   &lt;div class=&quot;step&quot;&gt;This is a step&lt;/div&gt;
  4.   &lt;div class=&quot;step&quot;&gt;This is a step&lt;/div&gt;
  5. &lt;/div&gt;

<!-- end snippet -->

More info: Ribbon shape using clip path

huangapple
  • 本文由 发表于 2023年3月7日 17:53:26
  • 转载请务必保留本文链接：https://go.coder-hub.com/75660382.html
  • clip-path
  • css
匿名

发表评论

匿名网友

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

确定