We would like to know how to create Custom CSS3 TextArea Resize Handle.
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
.wrap {<!-- w w w . j a v a 2s . c o m-->
position: relative;
display: inline-block;
}
.pull-tab {
height: 0px;
width: 0px;
border-top: 20px solid #EEE;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
-webkit-transform: rotate(-45deg);
position: absolute;
bottom: 0px;
right: -15px;
pointer-events: none;
z-index: 2;
}
.wrap:after {
border-top: 20px solid black;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
-webkit-transform: rotate(-45deg);
z-index: 1;
opacity: 0.5;
position: absolute;
right: -18px;
bottom: -3px;
pointer-events: none;
}
</style>
</head>
<body>
<div class="wrap">
<div class="pull-tab"></div>
<textarea placeholder="drag the triangle..."></textarea>
</div>
</body>
</html>
The code above is rendered as follows: