如何在div上创建三角形而不使用：after？

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。如何定期制作三角形样式？

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>

Answer 2

使用CSS transform

div {
  display: inline-block;
  padding: 1em;
  background: black;
}
div div {
  background: blue;
  margin-left: -1em;
}
  
div div:first-child {
  width: 1.5em;
}
div div:nth-child(2n) {
  transform: rotateZ( 45deg ) scale( .7 );
}

<div><div></div><div></div></div>

Answer 3

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

    .corner {
      position: absolute;
      right: -30px;
      top: 0;
      border-left: 10px solid tomato;
      border-right: 10px solid transparent;
      border-top: 10px solid transparent;
      border-bottom: 10px solid transparent;
-ms-transform: rotate(-90deg); /* IE 9 */
    -webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */
    transform: rotate(-90deg);
    }
    <div class="my-class">
      <span class="corner"></span>
    </div>

您可以使用具有position：absolute的类来使用 你需要在-90度变换你的孩子div而不是看起来像三角形。 这是新代码，我希望它可以帮助你。