如何使用 Styled Components 在组件的末端添加一个小三角形？

Question

我正在用 React Native 构建一个应用程序，样式绝对是一个弱点。

我需要实现这样的目标：

更准确地说，我需要指向正确方向的指针（请原谅双关语）是：

1. 如何画三角形
2. 正确使用绝对位置和 Z-index 来定位它（假设这是我应该使用的）。

Answer 1

您可以根据您的布局调整您的位置。

const Triangle = styled(View)`
  position: absolute;
  right: -20px;
  top: 50%;
  transform: translateY(-50%);
  border-top-width: 10px;
  border-bottom-width: 10px;
  border-top-color: transparent;
  border-bottom-color: transparent;
  border-left-width: 14px;
  border-left-color: red;
`;