1
我在本网站上发现了一个符合我需求的例子,除了一件事。如果我添加悬停,左侧和右侧三角形将具有相同的颜色,而不是新的悬停颜色。任何想法当我们将鼠标悬停在矩形上时如何拥有黑色三角形?带有尖端的矩形,在悬停时改变颜色
.yourButton {
position: relative;
width:200px;
height:40px;
margin-left:40px;
color:#FFFFFF;
background-color:blue;
text-align:center;
line-height:40px;
}
.yourButton:hover {background-color:black}
.yourButton:before {
content:"";
position: absolute;
right: 100%;
top:0px;
width:0px;
height:0px;
border-top:20px solid transparent;
border-right:40px solid blue;
border-bottom:20px solid transparent;
}
.yourButton:after {
content:"";
position: absolute;
left: 100%;
top:0px;
width:0px;
height:0px;
border-top:20px solid transparent;
border-left:40px solid blue;
border-bottom:20px solid transparent;
}
<div class="yourButton">You wanted this?</div>
可能与http://stackoverflow.com/questions/25445118/elongated-hexagon-shaped-button-using-only-one-element/25448974#25448974。不会说重复,因为方法不同,但您可以使用该链接答案中提到的方法。对于你目前的做法,只需在'hover'上改变':after'和':before'的''border'颜色。 – Harry