Vue实现一个长方形左侧多一个三角形的样式

可以使用CSS中的伪元素来实现这个效果。以下是一个示例代码：

HTML代码：

<div class="box">
  <div class="triangle"></div>
  <div class="content">
    <!-- 内容 -->
  </div>
</div>

CSS代码：

.box {
  position: relative;
  width: 200px;
  height: 100px;
  background-color: #ccc;
}

.triangle {
  position: absolute;
  top: 0;
  left: -20px;
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-right: 20px solid #ccc;
  border-bottom: 50px solid transparent;
}

.content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding-left: 20px;
}

解释一下上面的代码：

- .box：长方形的外层容器，设置了背景色和大小。
- .triangle：三角形的容器，使用了绝对定位，左侧使用了负的left值，使其偏移出长方形的左侧。使用border属性设置了三角形的形状和边框颜色。
- .content：长方形内部的内容容器，使用了绝对定位，覆盖在三角形上方。设置了左侧的padding值，留出空间给三角形。

这样就可以实现一个长方形左侧多一个三角形的样式了。