javascript - 如何在不使用 :after? 的情况下在 div 上创建三 Angular 形

Question

我想用 CSS 创建以下样式。

下面的代码工作正常:

.my-class:after {
      content: " ";
      position: absolute;
      top: 0;
      right: -16px;
      width: 0;
      height: 0;
      border-top: 18px solid transparent;
      border-bottom: 18px solid transparent;
      border-left: 17px solid $explainStageTailBkColor;
      z-index: 2;
      transition: border-color 0.2s ease;
    }

我正在使用 reactjs 并且我需要在运行时设置代码。由于 React 不支持更新伪元素样式，因此我必须为此使用常规 dom。如何将常规 dom 制作成三 Angular 形样式？

Answer 1

您可以通过将类与 position:absolute 一起使用

我在下面发布了一个示例

希望对你有帮助

.my-class {
  position: relative;
  width: 150px;
  height: 20px;
  background: tomato;
}

.corner {
  position: absolute;
  right: -20px;
  top: 0;
  border-left: 10px solid tomato;
  border-right: 10px solid transparent;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}

<div class="my-class">
  <span class="corner"></span>
</div>