Is it possible to customize to leave as of this image? link
I found a solution, but it is not useful for me, because it did not match the table.
.png){kind=link}
<!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>I think you can do it this way, the only problem I see is the issue 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> I got an alternate way. Using Skew and Translate . See if it works for you! :)
#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>