Question 33097 in React native Question posted in
The official React Native documentation can be found here.

how to transform my rectangle into a losange in react native with css?

My picture

Hello i’m stuck with this little problem my customer wants to do this in react native the orange border and i really suck in css how can i do it please ?

Tags:

2

Answers


  1. 0

    You can use the transform skew function in css. I would use it on an after pseudo element, so the content of the div will not be deformed. Like so:

    .losange {
  position: relative;
  width: 100px;
  padding: 10px;
}

.losange:after{ 
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 100%;
  border: 2px solid orange;
  transform: skew(-0.25rad);
  pointer-events: none;
}
    <div class="losange">test</div>

    EDIT:
    If you also want the background color to be skewed, you can do this by adding it to the after element pseudo element and setting the z-index to -1, which will put it behind the content of the losange.

    .losange {
  position: relative;
  width: 100px;
  padding: 10px;
}

.losange:after{ 
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 100%;
  border: 2px solid orange;
  transform: skew(-0.25rad);
  pointer-events: none;
  background-color: #eeeeee;
  z-index: -1;
}
    <div class="losange">test</div>
    Login or Signup to reply.
  2. 0

    By skewing a containing parent and counter skewing its child elements you can create what you need with a few lines of CSS:

    /* Solution */
.item          { transform: skew(-15deg) } /* skew  */
.item .content { transform: skew( 15deg) } /* reset */

/* Just eye-candy */
.wrapper       { display: flex; gap: 0.5rem }
.item          { border: 2px solid orange }
.item .content { padding: 0.5rem 1rem }

.item:hover    { cursor: pointer; background-color: hsl(0,0%,96%); border-color: black }
    <div class="wrapper">
    <div class="item">
        <div class="content">some content</div>
    </div>
    <div class="item">
        <div class="content">some content</div>
    </div>
    <div class="item">
        <div class="content">some content</div>
    </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search