反映样式矩形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%;
}

这会像普通的矩形div一样呈现边框为2像素。我希望它看起来像只在大屏幕上，否则正常的矩形div。

我怎样才能做到这一点？

Answer 1

您可以使用纯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/