How to create rounded shapes with css or SVG

Question

I'm working on a webshop for a client right now, their designer created an awesome looking website on paper. It's my job to translate it to HTML/CSS etc.

As you can see it's rounded corners and diagonal fills and diagonal texts as well.

The red shape says "add to cart" and the customer want's that clickable, but only that shape.

The above image I "sort of" managed to replicate and kind of works in Chrome. But when I tried it in Firefox it's all messed up.

This is the CSS code I used:

.product-grid > div {
position:relative;
width: 215px;
height: 320px;
display: inline-block;
vertical-align: top;
margin-right: 5px;
margin-left: 5px;
margin-bottom: 6px;
margin-top: 6px;
text-align: center;
-webkit-border-top-left-radius: 30px;
-webkit-border-bottom-right-radius: 30px;
-moz-border-radius-topleft: 30px;
-moz-border-radius-bottomright: 30px;
border-top-left-radius: 30px;
border-bottom-right-radius: 30px;
-moz-box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.6);
-webkit-box-shadow:3px 3px 10px rgba(0, 0, 0, 0.6);
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.6);
z-index:5;
overflow:hidden;
}

.product-grid .blue {
width: 0px;
height: 0px;
border-style: solid;
border-width: 75px 175px 0 0;
border-color: #009de0 transparent transparent transparent;
bottom:0px;
right:0px;

}


.product-grid .red {
width: 0px;
height: 0px;
border-style: solid;
border-width: 0 0 75px 175px;
border-color: transparent transparent #ff0000 transparent;
float:right;
bottom:0px;
right:0px;
cursor:pointer;
z-index:2;
}


.product-grid .blue .price {
display: block;
font-weight: 800;
font-size: 18px;
color: #FFF;
margin-bottom: 4px;
-webkit-backface-visibility: hidden;    
backface-visibility: hidden;
position:relative;
margin-top:-50px;
width:100px;
transform:rotate(337deg);
-ms-transform:rotate(337deg);
-moz-transform:rotate(337deg);
-webkit-transform:rotate(337deg);
-o-transform:rotate(337deg);

}
.product-grid .red .cart {
margin-bottom: 3px;
width:100px;
color:#FFF;
transform:rotate(337deg);
-ms-transform:rotate(337deg);
-moz-transform:rotate(337deg);
-webkit-transform:rotate(337deg);
-o-transform:rotate(337deg);
margin-top: 40px;
margin-right: 15px;
-webkit-backface-visibility: hidden;    
backface-visibility: hidden;
font-size:18px;
}

The add to cart button is still rectangular, allthough the upper half is not showing. That is not what my client wants.

What would you advise to do? Work with SVG? Or what cross browser solution should work?

Maybe someone can point me in the right direction?

Answer 1

SVG

Here made a <svg> example of your mock up.
You can add an SVG <A> element for linking calls etc.
What I did was add path for the red shape and the blue shape.
The main content is done with a polygon.
And used css to colour things.

.ticket {
  height: 400px;
  -webkit-filter: drop-shadow(2px 2px 5px black);
  filter: drop-shadow(0px 5px 15px black);
}

.ticket .top {
  fill:blue;
}
.ticket .top-text, .ticket .bottom-text {
  fill: white;
}
.ticket .bottom {
  fill: red;
}
.ticket .content {
  fill:white;
}

<svg class="ticket" viewBox="0 0 100 200">
  <path style="cursor:pointer;" class="top" d="M30,0 80,0 0,40 0,30 C 0,0 0,0 30,0Z"/>
  <text style="pointer-events:none;" transform="rotate(-25) translate(0 30)" class="top-text">€30</text>
  <polygon class="content" points="0,40 80,0, 100,0 100,160 20,200 0,200"/>
  <path style="cursor:pointer;" class="bottom" d="M100,180 100,160 20,200 80,200 C 100,200 100,200 100,180Z"/>
  <text style="pointer-events:none;" transform="rotate(-27) translate(-45 200)" class="bottom-text">Betallen</text>
</svg>

Answer 2

You can use png24 images with transparency to make your fills be non-rectangular. And for the text rotation, you can use (Text Rotation):

.rotate {

    /* Safari, Chrome */
    -webkit-transform: rotate(-10deg);

    /* Firefox */
    -moz-transform: rotate(-10deg);

    /* IE */
    -ms-transform: rotate(-10deg);

    /* Opera */
    -o-transform: rotate(-10deg);

}

Since you're using some CSS3 properties, I presume you're not aiming at old browsers.

EDIT: Something like http://jsfiddle.net/4Zjca/. Absolutely positioning the text, like in my example, is probably not a good idea, you can achieve the same result with margins, I suppose...

Answer 3

I tried combining some stuff. It is pure CSS :). It uses the techinques I put in the comments. See http://jsfiddle.net/wCTCW/

This rotates the text

.rotate20 {

-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.93969262, M12=0.34202014, M21=-0.34202014, M22=0.93969262,sizingMethod='auto expand')";
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.93969262, M12=0.34202014, M21=-0.34202014, M22=0.93969262,sizingMethod='auto expand');

-moz-transform:  matrix(0.93969262, -0.34202014, 0.34202014, 0.93969262, 0, 0);

-webkit-transform:  matrix(0.93969262, -0.34202014, 0.34202014, 0.93969262, 0, 0);

-o-transform:  matrix(0.93969262, -0.34202014, 0.34202014, 0.93969262, 0, 0);

}

This creates the triangle-shape

.box2 { width: 0; height: 0; border-top: 100px solid transparent; border-right: 240px solid red; }

Then I remove the lower right box by putting white on in. After the corner is gone, I put a border-radius on in to create the desired rounding.