如何使用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？或者有哪个跨浏览器的解决方案可以使用？

也许有人可以指导我吗？

- Ben Romijn

---

请同时添加您的HTML结构。 - Sumurai8

浏览器要求是什么？如果使用IE8，您的选项会更少。 - Rob Audenaerde

你可能也想检查一下三角形部分的内容：https://dev59.com/Ymw05IYBdhLWcg3wuUAL?rq=1 - Rob Audenaerde

请使用转换生成器http://www.css3-generator.de/transform.html。 - Anon

这在IE中实现起来会非常棘手。我倾向于说这是不可能完成的。 - user123444555621

Answer 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/这样的东西。像我的例子中那样绝对定位文本可能不是一个好主意，您可以通过设置边距来实现相同的效果，我想...

- Zemljoradnik

---

非常有用的网站：http://www.boogdesign.com/examples/transforms/matrix-calculator.html - Rob Audenaerde

谢谢！我可能会选择这个，它几乎解决了所有问题。除了三角形的可点击性之外，添加到购物车区域仍然可以作为矩形进行点击。 - Ben Romijn

Answer 2

我尝试将一些东西结合起来。这是纯CSS :). 它使用了我在注释中提到的技术。请参见http://jsfiddle.net/wCTCW/。

这段文本是HTML代码，需要保留。它的意思是：“旋转文本”。其中包含一个CSS类名“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; }

然后我通过添加白色来删除右下方的框。角落消失后，我加入了border-radius以创建所需的圆角效果。

- Rob Audenaerde

Answer 3

SVG

这里展示了一个你的模拟设计的<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>

- Persijn