作者:楼外蔷薇花开 | 来源:互联网 | 2023-02-12 16:48
我试图在CSS中模仿这种营养标签格式,但我根本无法获得正确的形状.我能想到的最好的是摆弄边缘半径,但这给了我更多的药丸形状,但仍然无法在底部获得黑色切割形状.有没有人在CSS中复制这样的营养标签?有人愿意尝试吗?任何帮助将不胜感激.
这是我到目前为止的链接:jsfiddle.net/f5jczunf /
#block {
border-radius:50%/10px;
background: #ccc;
padding: 20px;
width: 50px;
height: 100px;
border: 1px solid #000;
background-color:#FFF;
text-align:center;
}
.number {
font-weight:bold;
font-size:18pt;
text-align:center;
}
150
Calories
1> 小智..:
也许这个小例子可以提供帮助.
.label {
position: relative;
width: 100px;
height: 140px;
text-align: center;
border: 1px solid #000;
border-radius: 100px/50px;
overflow: hidden;
}
.title {
display: inline-block;
margin-top: 30px;
}
.bottom {
position: absolute;
bottom: -10px;
left: 0;
right: 0;
height: 50px;
color: #fff;
line-height: 40px;
border-top: 1px solid #000;
border-radius: 100px/50px;
background-color: #000;
}
Title
Bottom