divを使用せずにtriangleを作成するには：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> 

：絶対 あなたはそれが三角形のように見えるよりも-90degにあなたの子供のdiv要素を変換する必要があります。 ここに新しいコードがあります。