CSS3 Transform Skew (one corner)

Asked

Viewed 1,231 times

0

It is possible to customize to leave as this image? https://s3.envato.com/files/127249204/screenshots/screenshot%20(114). png

I found a solution, but it is not useful for me, because it was not the same as the table.

<!DOCTYPE html>
<html>
<head>
<style>

.div2 {
	border-top: 80px solid #3498db;
    border-right: 30px solid rgba(0, 0, 0, 0);
    height: 0;
    width: 250px;
    margin:50px 0;

}
</style>
</head>
<body>

  <div class="div2"></div>

</body>
</html>

html css css3

2 answers

1


I think you can do it this way, the only problem I see is the question of responsiveness.

.div2 {
  background:#3498db;
  height: 80px;
  width: 250px;
  position:relative;
}

.div2:after {
  position:absolute;
  bottom:-20px;
  content:" ";
  border-left: 250px solid #3498db;
  border-bottom: 20px solid rgba(0, 0, 0, 0);
}
<div class="div2"></div>

  • 1

    Show, that’s what it was =D

0

I managed with an alternative way. Using Skew and Translate. Get a head start! :)

#container {
  position: relative;
  overflow: hidden;
  width: 250px;
  height: 80px;
}

#container div {
  background: #3498db;
  width: 100%;
  height: 100%;
  transform: skewY(-5deg) translateY(-12px);
}
<div id="container">
  <div></div>
</div>

  • It worked too, Valew =D

Browser other questions tagged html css css3

You are not signed in. Login or sign up in order to post.