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

2019年7月21日 490次阅读

我现在正在为一个客户建立一个网上商店,他们的设计师在纸上创建了一个很棒的网站.我的工作是将它翻译成
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？或者什么是跨浏览器解决方案？

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

最佳答案 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>
点赞