How to create rounded shapes using css or SVG

Question

I am working on a web store for a client right now, their designer has created an amazing website on paper. It is my job to translate it to HTML / CSS, etc.

As you can see its rounded corners and diagonal fills and diagonal texts.

The red shape says "add to cart" and the customer wants it to be clickable, but only this shape.

The above image, which I sorted, was able to replicate and work in Chrome. But when I tried it in Firefox, everything went wrong.

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, although the top half is not displayed. This is not what my client wants.

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

Can someone point me in the right direction?

Answer 1

Svg

Here is an example of the <svg> of your layout.
You can add an SVG <A> element to connect calls, etc.
What I did was add a path for the red shape and the blue shape.
The main content is performed using a polygon.
And used css to color 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 so that your fills are not rectangular. And to rotate the text you can use ( Rotate Text ):

 .rotate { /* Safari, Chrome */ -webkit-transform: rotate(-10deg); /* Firefox */ -moz-transform: rotate(-10deg); /* IE */ -ms-transform: rotate(-10deg); /* Opera */ -o-transform: rotate(-10deg); } 

Since you are using some CSS3 features, I assume you are not targeting older browsers.

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

Answer 3

I tried to combine some things. This is pure CSS :). He uses the theinks that I added in the comments. See http://jsfiddle.net/wCTCW/

It 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); 

} Code>

This creates a triangular shape.

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

Then I remove the bottom right flag by inserting white color inside. After the corner is gone, I put the radius of the border to create the desired rounding.