CSS3 Corners: How to Create?

I’m trying to figure out a way to create this type of corner via CSS3.

That doesnt actually look like a corner. Are you trying to do an overhang?

if that gradient is NOT absolutely necessary, and you are actually trying for an overhang, as I guessed, this is agood way to accomplish the effect:


<html>
	<head>
		<title></title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta name="viewport" content="width=device-width">
		<style type="text/css">
		h1{ background: red; color:#fff; padding: 10px;  position: relative}
 h1:after{
 content:'';
 height: 0;
 width: 0;
 position: absolute;
 top:100%;
 left:0;
 border-left: 50px solid transparent;
 border-top: 15px solid brown;
}			
		</style>
	</head>
	<body>
<h1> An Overhang, but not a corner</h1>	



</body>
</html>

hope that helps

If dresden’s example isn’t what you wanted, supply some more information, but it’s not clear what you are trying to do there. (Particularly the context is not clear.)

I actually found something that helped: http://www.css3d.net/ribbon-generator/

I tried it out and it works perfectly! Thanks for trying to help guys!