css三角形的项目列表

CSS三角形是一种常见的网页设计效果，可以用来装饰按钮、分割线等。下面介绍一些基于CSS三角形实现的项目列表。

<ul class="triangle-list">
   <li>
      <a href="#">产品1</a>
      <div class="triangle-right"></div>
   </li>
   <li>
      <a href="#">产品2</a>
      <div class="triangle-right"></div>
   </li>
   <li>
      <a href="#">产品3</a>
      <div class="triangle-right"></div>
   </li>
</ul>

这是一个基于右侧三角形的项目列表，通过<div>标签实现。具体CSS代码如下：

.triangle-list {
   list-style: none;
   padding: 0;
   margin: 0;
}
.triangle-list li {
   position: relative;
   padding-right: 30px;
}
.triangle-right {
   position: absolute;
   top: 50%;
   right: 0;
   margin-top: -5px;
   width: 0;
   height: 0;
   border-top: 5px solid transparent;
   border-bottom: 5px solid transparent;
   border-left: 5px solid #333;
}

其中，<ul>的class为triangle-list，<li>的每个项目都包含一个<a>标签和一个用于显示右侧三角形的<div>标签。注意，<li>的样式设置为position: relative，而<div>的样式设置为position: absolute，是为了让三角形相对于<li>进行定位。

此外，还可以基于左侧三角形、上方三角形、下方三角形等多种形式进行改造。以上代码只是一个简单示例，希望能对大家有所帮助。