作者：诸葛烈火_220 | 来源：互联网 | 2023-02-13 16:18
我可以使用CSS创建相同的按钮.圆角是重要角落的主要原因.带圆角的三角形按钮,请参阅下面的代码和图片
.lngbtn {
position: relative;
width: 150px;
height: 50px;
margin: 50px;
color: #FFFFFF;
background-color: #f4d046;
text-align: center;
line-height: 48px;
padding: 16px;
font-weight: bold;
}
.lngbtn:before {
content:"";
position: absolute;
right: 100%;
top:0px;
width:0px;
height:0px;
border-top:25px solid transparent;
border-right:30px solid #f4d046;
border-bottom:25px solid transparent;
}
.lngbtn:after {
content:"";
position: absolute;
left: 100%;
top:0px;
width:0px;
height:0px;
border-top:25px solid transparent;
border-left:30px solid #f4d046;
border-bottom:25px solid transparent;
}
Get to know us
1> Harry..：
我并不是说用CSS无法实现这一点,但用CSS做这件事将是一项繁琐的工作.SVG始终是用于创建这样复杂形状的推荐工具(即使使用SVG,这种特殊形状也难以创建).
SVG是:
可扩展,因此它们有助于响应式设计,形状可以拉伸以匹配内容
让我们更多地控制形状
很容易维护
允许我们使用偶数渐变或非纯色背景作为元素,就像在这个答案中所做的那样(对于带有圆角的正六边形)
在SVG中,它只需要path以圆角六边形的形式创建,然后将该path图像放置在容器后面.
下面是关于path元素d属性中使用的各种命令的一些解释(但我强烈建议你学习SVG命令 - 这里是来自MDN的导师):
M - 将假想笔移动到坐标指定的点.
L - 从前一个坐标表示的点到当前坐标绘制一条直线.
Q- 绘制从笔的当前位置到该Q命令后面的第二组坐标所指示的点的二次曲线.第一组坐标代表控制点.该控制点确定曲线的斜率.
z - 通过从当前笔位置到起点绘制直线来关闭形状.
.hex {
position: relative;
height: 100px;
min-width: 100px;
padding: 12px 24px;
margin: 4px;
float: left;
font-weight: bold;
font-size: 20px;
text-align: center;
color: white;
}
.hex svg {
position: absolute;
height: 100%;
width: 100%;
top: 0px;
left: 0px;
z-index: -1;
}
path {
fill: rgb(251, 208, 0);
}
.hex.border path {
stroke: red;
stroke-width: 4;
}
span {
display: block;
margin-top: 50px;
padding: 8px;
transform: translateY(-50%);
}
Some lengthy text
without line break.
Some very lengthy text
with line break.
2> 小智..：
试试这个吧.
.lngbtn {
position: relative;
width: 150px;
height: 50px;
margin: 50px;
color: #FFFFFF;
background-color: #f4d046;
text-align: center;
line-height: 48px;
padding: 16px;
font-weight: bold;
}
.lngbtn:before {
content:"";
transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
-moz-transform: rotate(45deg);
background-color: #f4d046;
width:38px;
height:39px;
top: 5.3px;
right: 85%;
position:absolute;
border-radius:6px;
z-index:-1;
}
.lngbtn:after {
content:"";
transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
-moz-transform: rotate(45deg);
background-color: #f4d046;
width:38px;
height:39px;
top: 5.3px;
left: 85%;
position:absolute;
border-radius:6px;
z-index:-1;
}
Get to know us
京公网安备 11010802041100号