我这里有一个与 CSS 相关的问题。我想创建一个水平箭头,就像屏幕截图上的这样(实际上它是在油漆中添加的)。
作为一种可能的解决方案,我考虑使用 transform: skew
属性,但我认为不可能在左侧和右侧倾斜一个元素。
请问对此有什么建议吗? :)
最佳答案
通过利用 :before
和 :after
选择器,可以使用“单个 div”。
.arrow {
margin: 50px;
width: 500px;
height: 40px;
}
.arrow:before {
content: '';
position: relative;
left: 0;
top: 0;
display: inline-block;
width: calc(50% - 2px);
height: 100%;
border: 1px solid red;
border-right-width: 0;
transform: skewY(10deg);
}
.arrow:after {
content: '';
right: 0;
top: 0;
position: relative;
display: inline-block;
width: calc(50% - 2px);
height: 100%;
border: 1px solid red;
border-left-width: 0;
transform: skewY(-10deg);
}
<div class="arrow"></div>
关于jquery - CSS:有什么方法可以创建从上到下的箭头?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32770667/