英文:
CSS Rectangle with pointy bottom
问题
如何创建一个类似这样的步进器？我尝试使用clip-path重新创建它们，但只成功制作了水平的，而不是垂直的。我尝试了很多方法，但在撰写此代码时，这段代码是我最新的尝试。我需要它在li元素之前，所以我尝试使用::before，但箭头指向右侧，看起来更像播放按钮而不是步进器。
片段
.wrapper {
height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.steps {
position: relative;
height: 80%;
width: 75%;
.step {
height: 80px;
display: flex;
align-items: center;
&::before {
content: "";
background: red;
height: 110%;
width: 15px;
margin: 0 2rem;
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 100%, 25% 50%, 0% 50%);
}
}
}
<div class="steps">
<div class="step">
<p class="step-text">这是一步</p>
</div>
<div class="step">
<p class="step-text">这是一步</p>
</div>
<div class="step">
<p class="step-text">这是一步</p>
</div>
</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.
Snippet
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.wrapper {
height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.steps {
position: relative;
height: 80%;
width: 75%;
.step {
height: 80px;
display: flex;
align-items: center;
&::before {
content: "";
background: red;
height: 110%;
width: 15px;
margin: 0 2rem;
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 100%, 25% 50%, 0% 50%);
}
}
}
<!-- language: lang-html -->
<div class="steps">
<div class="step">
<p class="step-text">This is a step</p>
</div>
<div class="step">
<p class="step-text">This is a step</p>
</div>
<div class="step">
<p class="step-text">This is a step</p>
</div>
</div>
</div>
<!-- end snippet -->
答案1
得分: 1
使用 calc CSS 函数修复你的剪切路径：
.step{
height: 3rem;
display: flex;
align-items: center;
margin: 2px 0;
}
.step::before{
--size: 0.4rem;
content: "";
background: #6ea639;
height: calc(100% + var(--size));
width: calc(var(--size) * 2);
margin: 0 1rem 0 0;
clip-path: polygon(
0% 0%, /* 左上角 */
50% var(--size), /* 顶部中间 */
100% 0%, /* 右上角 */
100% calc(100% - var(--size)), /* 右下角 */
50% 100%, /* 底部中间 */
0% calc(100% - var(--size)) /* 左下角 */
);
}
更多信息：使用剪切路径创建带形状的带子
英文:
Fix your clip-path by using calc CSS function:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.step{
height: 3rem;
display: flex;
align-items: center;
margin: 2px 0;
}
.step::before{
--size: 0.4rem;
content: "";
background: #6ea639;
height: calc(100% + var(--size));
width: calc(var(--size) * 2);
margin: 0 1rem 0 0;
clip-path: polygon(
0% 0%, /* Top left */
50% var(--size), /* Top center */
100% 0%, /* Top right */
100% calc(100% - var(--size)), /* Bottom right */
50% 100%, /* Bottom center */
0% calc(100% - var(--size)) /* Bottom left */
);
}
<!-- language: lang-html -->
<div class="steps">
<div class="step">This is a step</div>
<div class="step">This is a step</div>
<div class="step">This is a step</div>
</div>
<!-- end snippet -->
More info: Ribbon shape using clip path
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论