CODEWITHSUNDEEP
htmlcssreactjs
Thinker
Thinker

Reputation: 5356

React style rectangular div as in example

I have a div in my react application:

  <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>

And it's css:

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

This renders like normal rectangular div with border of 2 px. I want it to look like following only on large screens, otherwise normal rectangular div.

enter image description here

How can I achieve this?

Upvotes: 0

Views: 1339

Answers (1)

aroundtheworld
aroundtheworld

Reputation: 782

You could add a pseudo-element using pure css, like

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

Remember to add position: relative; (for e.g.) to the original div.

Keep all the values that are 20px the same (or if using Sass/SCSS use a variable)

demo of the css here https://jsfiddle.net/mw2vpgnr/

Upvotes: 1

Related Questions