写一段css代码，让一个矩形div的右边是三角箭头状的

可以使用CSS伪元素和border属性来实现一个矩形div的右边是三角箭头状的效果，代码如下：

.arrow-box {
  position: relative;
  width: 200px;
  height: 100px;
  background-color: #fff;
  border: 1px solid #ccc;
}

.arrow-box::before {
  content: "";
  position: absolute;
  top: 50%;
  right: -10px;
  transform: translateY(-50%);
  border-top: 10px solid transparent;
  border-left: 10px solid #ccc;
  border-bottom: 10px solid transparent;
}

其中，`arrow-box`为矩形div的类名，使用`position: relative;`来确保伪元素能够相对于该矩形div进行定位。伪元素`::before`用来创建三角箭头，使用`content: "";`来添加内容，并设为绝对定位。`top: 50%;`和`transform: translateY(-50%);`用来将三角箭头垂直居中。`right: -10px;`和`border-left: 10px solid #ccc;`用来设置三角箭头的位置和样式。剩余两个边的样式使用`border-top: 10px solid transparent;`和`border-bottom: 10px solid transparent;`来设置。