如何使用css或SVG创建圆角形状

Question

我正在为客户开设网店，他们的设计师在纸上创建了一个很棒的网站。我的工作是将其翻译成HTML / CSS等。

正如你所看到的那样，它还有圆角和对角线填充以及对角线文本。

红色形状表示“添加到购物车”，客户想要的是可点击的，但只有那个形状。

上面的图片我“有点”设法复制并在Chrome中有效。但是当我在Firefox中尝试它时，它们都搞砸了。

这是我使用的CSS代码：

.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;
}

“添加到购物车”按钮仍为矩形，尽管上半部分未显示。这不是我的客户想要的。

你建议做什么？使用SVG？或者什么是跨浏览器解决方案应该有效？

也许有人可以指出我正确的方向？

Answer 1

您可以使用透明度的png24图像使填充为非矩形。对于文本轮换，您可以使用（Text Rotation）：

.rotate {

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

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

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

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

}

由于您使用的是某些CSS3属性，我认为您不是针对旧浏览器。

编辑：http://jsfiddle.net/4Zjca/之类的东西。绝对定位文本，就像在我的例子中，可能不是一个好主意，你可以用边距获得相同的结果，我想... ...

Answer 2

SVG

这里制作了一个模拟的＆lt; svg＆gt; 示例 您可以添加SVG <A>元素来链接来电等。
我所做的是添加红色形状和蓝色形状的路径 主要内容是用多边形完成的 并使用CSS来为事物着色。

.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 3

我试过结合一些东西。这是纯CSS :)。它使用我在评论中提出的技术。见http://jsfiddle.net/wCTCW/

这会旋转文字

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

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

这会创建三角形

}

然后我通过将白色打开来移除右下方框。在角落消失后，我将边框半径设置为in以创建所需的圆角。