英文:
Ideas on how to implement a design in next js
问题
我正在使用Next.js和Tailwind进行前端项目开发。我已经拿到了一个Figma设计来实现。有一个部分，我需要展示一些步骤：
有没有关于如何实现截图中显示的步骤的想法？
英文:
I am working on frontend project in Next.js and Tailwind. I have a been given a Figma design to implement. There is this part where I am supposed to show some steps:
Any ideas of how I can implement the steps shown in the screenshot?
答案1
得分: 0
你可以考虑使用带有 clip-path 的略有重叠的元素来制作箭头形状：
<div class="flex">
<div class="bg-orange-200 p-4 grow [clip-path:polygon(0_0,calc(100%-1rem)_0,100%_50%,calc(100%-1rem)_100%,0_100%)]">
Step 1
</div>
<div class="bg-stone-200 p-4 pl-8 grow -ml-2 [clip-path:polygon(0_0,calc(100%-1rem)_0,100%_50%,calc(100%-1rem)_100%,0_100%,1rem_50%)]">
Step 2
</div>
<div class="bg-stone-200 p-4 pl-8 grow -ml-2 [clip-path:polygon(0_0,calc(100%-1rem)_0,100%_50%,calc(100%-1rem)_100%,0_100%,1rem_50%)]">
Step 3
</div>
</div>
英文:
You could consider using slightly overlapping elements with clip-path to make the arrow shape:
<!-- begin snippet: js hide: false console: false babel: false -->
<!-- language: lang-html -->
<script src="https://cdn.tailwindcss.com"></script>
<div class="flex">
<div class="bg-orange-200 p-4 grow [clip-path:polygon(0_0,calc(100%-1rem)_0,100%_50%,calc(100%-1rem)_100%,0_100%)]">
Step 1
</div>
<div class="bg-stone-200 p-4 pl-8 grow -ml-2 [clip-path:polygon(0_0,calc(100%-1rem)_0,100%_50%,calc(100%-1rem)_100%,0_100%,1rem_50%)]">
Step 2
</div>
<div class="bg-stone-200 p-4 pl-8 grow -ml-2 [clip-path:polygon(0_0,calc(100%-1rem)_0,100%_50%,calc(100%-1rem)_100%,0_100%,1rem_50%)]">
Step 3
</div>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论