SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Guru
    Join Date
    Jul 2003
    Location
    england
    Posts
    819
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Question CSS3 Corners: How to Create?

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

  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,742
    Mentioned
    32 Post(s)
    Tagged
    1 Thread(s)
    That doesnt actually look like a corner. Are you trying to do an overhang?

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,742
    Mentioned
    32 Post(s)
    Tagged
    1 Thread(s)
    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:

    Code:
    <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

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,622
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    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.)

  5. #5
    SitePoint Guru
    Join Date
    Jul 2003
    Location
    england
    Posts
    819
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Smile

    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!


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •