创建用于列表元素的行。

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

Create lines for list elements

问题

如何用CSS或Tailwind实现这样的UI?这是一个侧边栏,但列表项有弯曲的线进入它们。

这是我确切意思的图像:创建用于列表元素的行。

英文:

how can I do like this UI with css or tailwind?
It is a sidebar but the list items have curved lines going into them.

Here's an image of what I mean exactly:

创建用于列表元素的行。

答案1

得分: 1

以下是翻译的内容:

这是 Tailwind Play 中的一种方法

    <script src="https://cdn.tailwindcss.com"></script>

    <div class="relative bg-blue-700 text-white max-w-[16rem] p-4 pl-8">
      <div class="absolute left-4 top-4 h-6 border-l-2 border-b-2 w-4 rounded-bl-lg"></div>
      
      <div class="px-4 py-3 bg-white/20 rounded-xl">
        管理项目
      </div>
      
      <div class="absolute left-4 top-4 h-[4.5rem] border-l-2 border-b-2 w-4 rounded-bl-lg"></div>
      
      <div class="px-4 py-3">
        管理类别
      </div>
      
    </div>
英文:

Here is an approach in this Tailwind Play

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

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

&lt;script src=&quot;https://cdn.tailwindcss.com&quot;&gt;&lt;/script&gt;

&lt;div class=&quot;relative bg-blue-700 text-white max-w-[16rem] p-4 pl-8&quot;&gt;
  &lt;div class=&quot;absolute left-4 top-4 h-6 border-l-2 border-b-2 w-4 rounded-bl-lg&quot;&gt;&lt;/div&gt;
  
  &lt;div class=&quot;px-4 py-3 bg-white/20 rounded-xl&quot;&gt;
    Manage Items
  &lt;/div&gt;
  
  &lt;div class=&quot;absolute left-4 top-4 h-[4.5rem] border-l-2 border-b-2 w-4 rounded-bl-lg&quot;&gt;&lt;/div&gt;
  
  &lt;div class=&quot;px-4 py-3&quot;&gt;
    Manage Categories
  &lt;/div&gt;
  
&lt;/div&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年4月16日 23:40:35
  • 转载请务必保留本文链接:https://go.coder-hub.com/76028717.html
匿名

发表评论

匿名网友

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

确定