<分区>
css - 如何使用 CSS 伪元素使我的 span 看起来像一个箭头？
我想要完成的事情的图片:
这是我正在使用的 HTML 片段:
<section class="card button ">
<span class="arrow">More Work</span>
</section>
这是我的 CSS。我在网上看了一些东西并尝试在 jsbin 上玩它，但我需要一些看起来更像按钮的东西。
.button span{
background-color: gold;
width: 40%;
height: 30%;
}
.button span::after{
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 0;
border-left: 20px solid black;
border-top: 20px solid black;
border-bottom: 20px solid black;
}
.button span::before{
content: "";
position: absolute;
right: -20px;
bottom: 0;
width: 0;
height: 0;
border-left: 20px solid black;
border-top: 20px solid black;
border-bottom: 20px solid black;
}
最佳答案
你可以用一个没有CSS伪元素的span来创建它 检查这段代码
<span class="arrow left"></span>
<span class="arrow right"></span>
<span class="arrow up"></span>
<span class="arrow down"></span>
.arrow {
border: solid black;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
}
.right {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
.left {
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
}
.up {
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
}
.down {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
关于css - 如何使用 CSS 伪元素使我的 span 看起来像一个箭头？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52498438/