CSS3 Shape Proportions

When creating a shape within CSS3 like the one below what would be the best way to do it keeping in mind that I would like to retain much of the style as possible?

Answers


How about using CSS3 gradients with border-radius property? I've made this from scratch, you can have a look

Demo

   div {
        height: 200px;
        width: 200px;
        margin: 50px;
        border: 3px solid #B6801F;
        border-radius: 24px;
        background: #f7d060;
        background: -moz-linear-gradient(top,  #f7d060 0%, #ed8328 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f7d060), color-stop(100%,#ed8328));
        background: -webkit-linear-gradient(top,  #f7d060 0%,#ed8328 100%);
        background: -o-linear-gradient(top,  #f7d060 0%,#ed8328 100%);
        background: -ms-linear-gradient(top,  #f7d060 0%,#ed8328 100%);
        background: linear-gradient(to bottom,  #f7d060 0%,#ed8328 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7d060', endColorstr='#ed8328',GradientType=0 );
        box-shadow: 1px 2px 3px #313131;
        position: relative;
    }

    div span {
        position: absolute;
        top: 10px;
        width: 180px;
        left: 10px;
        height: 80px;
        background: -moz-linear-gradient(top,  rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.2) 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.7)), color-stop(100%,rgba(255,255,255,0.2)));
        background: -webkit-linear-gradient(top,  rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.2) 100%);
        background: -o-linear-gradient(top,  rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.2) 100%);
        background: -ms-linear-gradient(top,  rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.2) 100%);
        background: linear-gradient(to bottom,  rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.2) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3ffffff', endColorstr='#33ffffff',GradientType=0 );
        display: block;
        border-radius: 18px;
}

Need Your Help

How to apply CSS correctly to iFrame?

html css iframe

Folks, i have the following problem.

Html Frame Coding, Linking to info in another Frame

html css frames

OK so I'm coding something and i have a left frame, a right frame, and of coarse the main frameset html document. I want to have a link in the left frame that when clicked will jump to information ...

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.