How to create rounded shapes with css or SVG


Tags: html,css,svg

Problem :

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.

enter image description here

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.

enter image description here

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?



Solution :

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>


    CSS Howto..

    CSS how to align elements

    how to make labels and button appear only when mouse is over a div in asp.net C#

    CSS: How do I shrink a div to beyond a font's invisible padding?

    With html tables, using CSS, how do I get the tables next to each other?

    I have 3 divs in one row, how do I get the middle div to stay an exact width while the left and right div shrink in as the screen resizes smaller?

    How do i automatically resize Fonts and Images (complete Website) on window-resize?

    How to clear the (CSS) visited history of an Android WebView?

    how to change size of the element using css?

    How to make all elements in one line?

    How to read property value of a DIV which is set by a CSS class?

    How to reset a jquery function on-the-fly

    How to view the html code that is used to display hidden json data?

    How can one pass component property values to the css/less clientlibs for that component? AEM 6.2

    How can I change color of visited cgridview row?

    Show/Hide Markers that are pulled from function

    How to hide the toolbar in Chrome for Android tablets for a 100% high website

    How do I create a teardrop in HTML?

    How is possible to get 2d transformation css vertical way

    How do I require an HTML document (webpage) to be a certain size, or use scroll bars

    slide show with bootstrap

    How apply CSS to browse button

    How do I make everything on this page centered and fully responsive for all browsers?

    Show a
  • line like is hovered
  • How to change the position of the JQuery dialog box

    CSS: How to get an animated gif background-image on top of a div

    How to change CSS id property depending upon screen size

    How to show foreground image and then hide on hover?

    How to fix incorrect element size on browser scaling?

    How to align logo and text in bootstrap on small screens?

    How do I make my images in my div change opacity on hover?