は、私は私の中にdiv要素を持っている

Question

の例のようなスタイルの長方形のdivを反応させるのアプリケーションの反応：

<Col xs={12} sm={12} md={12} lg={6}> 
     {/* contains change email component */} 
     <div className="div-two-up"> 
     <If condition={this.state.showEmailReset}> 
      <div className="email-reset-div"> 
       <ResetEmail/> 
       </div> 
      </If> 
     </div> 
    </Col> 

をそして、それはCSSです：

.email-reset-div{ 
    border: 2px solid lightgray; 
    padding: 1%; 
} 

これは2ピクセルの境界線を持つ通常の長方形のdiv要素のようにレンダリングします。私はそれが大画面でのみ続く、そうでなければ通常の矩形のdivのように見えるようにします。

私はこれをどのように達成することができますか？

Answer 1

.email-reset-div::after { 
    content: ''; 
    width: 0; 
    height: 0; 
    border-top: 20px solid transparent; 
    border-bottom: 20px solid transparent; 
    border-right:20px solid blue; 
    left: -20px; 
    position: absolute; 
} 

は元divに（例えば用）position: relative;を追加することを忘れないでくださいようにあなたは、純粋なCSSを使用した擬似要素を追加することができます。

あなたの答えのためにここにhttps://jsfiddle.net/mw2vpgnr/