陣營風格的長方形格爲例

在我有一個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%; 
}

這使得像普通的矩形DIV 2像素的邊界。我希望它看起來像只在大屏幕上，否則正常的矩形div。

我怎樣才能做到這一點？

來源

2017-05-28 Nitish

您可以添加使用純CSS僞元素，像

.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; 
}

記住添加position: relative;（例如爲）原來的div。

保持所有那些20px的相同（或者，如果使用的Sass/SCSS使用一個變量）

演示的CSS這裏https://jsfiddle.net/mw2vpgnr/

來源

2017-05-28 17:01:08 Rockafella

謝謝您的回答，我的問題的圖不是值準確的一個。我修改了它，你能否指出如何實現它？我基本上只是顯示內沒有任何顏色的邊界..雖然:)謝謝 – Nitish

也只在大屏幕上:) – Nitish

'只在大屏幕上'，你可以使用媒體查詢。所以你會用類似'@media的屏幕和（min-width：1200px）{..}'https://www.w3schools.com/css/css_rwd_mediaqueries.asp 形狀 - 嘗試更改邊框上的值，並且可以看到它如何影響三角形形狀:)（提示，嘗試更改邊框頂部和邊框底部以獲取新形狀）。邊界很難用純html/css來實現，而是希望將背景圖像添加到適合現有div的僞元素。 – Rockafella

陣營風格的長方形格爲例

回答

相關問題