相关疑难解决方法(0)
仅使用一个元件的细长六角形按钮
我想用CSS制作一个像这样的按钮而不使用其他元素.
按钮图像
由于按钮有一个border附件,我想我通常需要两个,:before和:after元素在一侧只创建一个箭头.因此,为了在每一侧制作一个箭头,我需要span链接中的另一个元素.
我尝试的第二种方法是你在下面看到的方法.但是使用这种解决方案,它们没有正确居中,箭头的每一边的长度都不同.
有人有解决方案吗？
/* General Button Style */
.button {
display: block;
position: relative;
background: #fff;
width: 300px;
height: 80px;
line-height: 80px;
text-align: center;
font-size: 20px;
text-decoration: none;
text-transform: uppercase;
color: #e04e5e;
margin: 40px auto;
font-family: Helvetica, Arial, sans-serif;
box-sizing: border-box;
}
/* Button Border Style */
.button.border {
border: 4px solid #e04e5e;
}
.button.border:hover {
background: #e04e5e;
color: #fff;
}
/* Button Ribbon-Outset Border Style */
.button.ribbon-outset.border:after,
.button.ribbon-outset.border:before { …9
推荐指数
推荐指数
1
解决办法
解决办法
4508
查看次数
查看次数
带圆角的CSS六角形按钮
我可以使用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;
}<a href="#" class="lngbtn">Get to know us</a>4
推荐指数
推荐指数
2
解决办法
解决办法
1439
查看次数
查看次数