Design a creative "post- comment" box with diagonal borders
Diagonal borders used as background
In this step we will give border and then make it transparent.Then we will position it according to our text.
Basic HTML
<html>
<head>
<style>
body{
width:400px;
margin:150px auto; ;
font-family: cursive;
background-color:#181818 ;
}
a{
padding:10px;
text-decoration:none;
color:white;
font-weight;bold
text shadow:0 1px 0 #686868 ;
line-height:56px;
border-right:30px solid transparent;
border-bottom:30px solid #484848 ;
height:0;
display:inline-block;
}
div{
border:5px inset #A00000 ;
background-color:#787878 ;
padding:40px;
}
.post h3{
font-size:24px;
font-family:trebuchetms;
color:#ffffff;
}
</style></head>
<html>
<body>
<div>
<span class="post"><h3>Post comments: </h3>
</span>
<form action="MAILTO:someone@example.com" method="post" enctype="text/plain">
<a href="#">Name</a><br/>
<input type="text" name="name" value="" /><br />
<a href="#">E-mail</a><br/>
<input type="text" name="mail" value="" /><br />
<a href="#">Comment</a><br/>
<textarea rows="8" cols="35">
</textarea>
<br /><br />
<input type="submit" value="Send">
<input type="reset" value="Reset">
</form>
</div>
</body>
</html>
