4

我现在正在为一个客户开发一个网上商店，他们的设计师在纸上创建了一个很棒的网站。将它翻译成 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？或者应该使用什么跨浏览器解决方案？

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

4

3 回答 3

1

我尝试结合一些东西。它是纯 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);

}

这将创建三角形

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

然后我通过在其中添加白色来移除右下角的框。在拐角消失后，我在其中添加一个边框半径以创建所需的圆角。

于 2013-08-15T07:37:27.063 回答
1

您可以使用具有透明度的 png24 图像来使您的填充为非矩形。对于文本旋转，您可以使用（文本旋转）：

.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/这样的东西。绝对定位文本，就像我的例子一样，可能不是一个好主意，你可以用边距实现相同的结果，我想......

于 2013-08-15T07:15:00.927 回答
1

SVG

Here做了一个你的模拟的<svg>例子。
您可以添加一个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>

于 2015-05-20T15:53:25.300 回答