.box {
position: relative;
margin: 18px;
width: 8em;
height: 6em;
border: 1px solid rgb(77, 77, 77);
color: #FF1919;
background-color: pink;
}
.box:hover {
width: 8em;
margin: 18px;
}
.box:before {
content: '';
position: relative;
width: 30%;
left: 18px;
right: 80%;
height: 40px;
top: 30%;
background: rgba(0, 0, 0, 0.1);
display: inline-block;
background-color: blue;
}
.box:after {
content: '';
position: absolute;
left: 43%;
top: 30%;
margin-top: -18px;
border-style: solid;
border-width: 40px;
border-color: transparent transparent transparent rgba(0, 0, 0, 0.1);
}

<div class="box"></div>
&#13;
我创建了一个箭头,我希望突出显示蓝色的箭头,这是灰色的。
我还希望使用此总箭头作为按钮导航到具有html扩展名的下一个场景页面。
为此我正在使用:
<div style="position: absolute; right: 40px; bottom: 70px;">
<form action="abc.html" align="right" style="margin-right:100px ; display:inline">
<input type="submit" class="box"></input>
</form>
</div>
但它占用了该css对象(矩形)框的一部分并留下了其他部分。
答案 0 :(得分:1)
也许您可以像这样使用HTML特殊字符箭头符号➧➧
这样你就可以按照自己喜欢的方式玩颜色,大小等。
以下是代码:
<div class="box">➧</div>
这是一个单独的div
这是输入。请注意,类型已更改为按钮
<div style="position: absolute; right: 40px; bottom: 70px;">
<form action="abc.html" align="right" style="margin-right:100px ; display:inline">
<input type="button" class="box" value="➧"></input>
</form>
两者的CSS都是
.box {
width:100px;
height:100px;
background-color:pink;
color:blue;
text-align:center;
font-size:100px;
line-height:100px;
}
答案 1 :(得分:1)
你可以简单地使用伪元素。
.arrow {
height: 50px;
width: 50px;
background: #0000ff;
margin: 20px;
position: relative;
}
.arrow:after {
content: '';
position: absolute;
top: -15px;
right: -80px;
width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 80px solid #0000ff;
border-bottom: 40px solid transparent;
}
.box {
width: 165px;
padding: 20px;
border: 1px solid #222;
background: #eee;
}
&#13;
<a href="abc.html">
<div class="box">
<div class="arrow"></div>
</div>
</a>
&#13;
答案 2 :(得分:1)
您只需要更改代表头
的:after
伪元素的属性
border-color: transparent transparent transparent rgba(0, 0, 255, 1);
.box {
position: relative;
margin: 18px;
width: 8em;
height: 6em;
border: 1px solid rgb(77, 77, 77);
color: #FF1919;
background-color: pink;
position: relative;
}
.box:before {
content: '';
position: absolute;
width: 30%;
left: 20%;
height: 40px;
top: 50%;
transform: translateY(-50%);
background: rgba(0, 0, 0, 0.1);
background-color: blue;
}
.box:after {
content: '';
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 50%;
/* before width 30% + before left position 20% */
border-style: solid;
border-width: 40px;
border-color: transparent transparent transparent rgba(0, 0, 255, 1);
}
&#13;
<div class="box"></div>
&#13;
答案 3 :(得分:0)
对于导航,您可以在html页面中添加<a>
标记,并为班级.box:after
的颜色更改边框颜色,如下所示:
HTML:
<a href="http://www.w3schools.com" target="_blank"><div class="box"></div></a>
CSS:
.box:after {
content: '';
position: absolute;
left: 43%;
top: 30%;
margin-top: -18px;
border-style: solid;
border-width: 40px;
border-color: transparent transparent transparent **rgba(7, 17, 241, 1);** }