Html 如何使用CSS制作V形箭头？

大家都知道你可以用这个做一个三角形：

#triangle {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
}

这就产生了一个实心的填充三角形。但是你怎么做一个空心箭头状的三角形，像这样

---

“/>

这比其他建议更容易解决

只需画一个正方形，并将

边框

属性仅应用于两条连接边

然后根据希望箭头指向的方向旋转正方形，例如：

transform:rotate（）

.triangle{
右边框：10px实心；
边框底部：10px实心；
高度：30px；
宽度：30px；
变换：旋转（-45度）；
}

---

您可以使用

前

或

后

伪元素并对其应用一些CSS。有多种方法。您可以在

前

和

后添加
，并旋转和定位它们以形成一个条形图。更简单的解决方案是在
前和后添加两个边框使用
transform:rotate
旋转它

向下滚动找到使用实际元素而不是伪元素的不同解决方案

在本例中，我将箭头添加为列表中的项目符号，并使用
em
size使其大小与列表的字体一致


ul{
列表样式：无；
}
大的{
列表样式：无；
字体大小：300%
}
李：以前{
位置：相对位置；
/*顶部：3pt；取消对此的注释以按照注释中的要求降低图标*/
内容：“；
显示：内联块；
/*通过使用em比例，箭头将根据字体大小调整大小*/
宽度：0.4em；
高度：0.4em；
右边框：0.2米纯黑色；
边框顶部：0.2米纯黑；
变换：旋转（45度）；
右边距：0.5em；
}
/*变色*/
李：悬停{
颜色：红色；/*表示文本*/
}
李：悬停：：之前{
边框颜色：红色；/*表示箭头（为边框）*/
}

项目1
项目2
项目3
项目4


项目1
项目2
项目3
项目4
响应性V形/箭头
它们自动调整大小并与您的文本颜色相同。即插即用：）




正文{
字体大小：25px；/*改变字体，看魔术*/
颜色：#f07；/*改变颜色，看魔术*/
} 
/*响应箭*/
[类别^=arr-]{
边框：纯色；
边界宽度：0.2米。2米0；
显示：内联块；
填充：.20em；
}
.arr右{变换：旋转（-45度）；}
.arr左{变换：旋转（135度）；}
.arr up{变换：旋转（-135度）；}
.arr down{变换：旋转（45度）；}
这是.arr right

这是.arr left

这是.arr up

这是.arr down
只需使用


*{框大小：边框框；填充：0；边距：0}
：root{background:white；transition:background.3s ease in out}
：root:hover{背景：红色}
div{
保证金：20px自动；
宽度：150px；
高度：150像素；
职位：相对
}
div:before，div:after{
内容：''；
位置：绝对位置；
宽度：75px；
高度：20px；
背景：黑色；
左：40px
}
部门：以前{
顶部：45px；
变换：旋转（45度）
}
部门：之后{
底部：45px；
变换：旋转（-45度）
}
这里有一种不同的方法：

1） 使用乘法字符：
×；
×

2） 使用
溢出隐藏一半：隐藏

3） 然后添加一个三角形作为尖端的伪元素

这里的优点是不需要任何转换（它在IE8+中可以工作）



.arrow{
位置：相对位置；
}
.阿罗：以前{
内容：“×”；
显示：内联块；
位置：绝对位置；
字体大小：240px；
字体大小：粗体；
字体系列：verdana；
宽度：103px；
高度：151px；
溢出：隐藏；
线高：117px；
}
.阿罗：之后{
内容：''；
显示：内联块；
位置：绝对位置；
左：101px；
top:51px；
宽度：0；
身高：0；
边框样式：实心；
边框宽度：25px 0 25px 24px；
边框颜色：透明黑色；
}
另一种使用边框且无CSS3属性的方法：


div，div:after{
边框宽度：80px 0 80px 80px；
边框颜色：透明#000；
边框样式：实心；
位置：相对位置；
}
部门：之后{
内容：''；
位置：绝对位置；
左：-115px；上：-80px；
左边框颜色：#fff；
}
本身就是一个非常棒的箭头！只需在一个div前面加上它，并对其进行样式化即可


div{
字体大小：50px；
}
div：：之前{
内容：“>”；
字体：50px‘Consolas’；
字号：900；
}
Hatz！
我需要在我的项目中将
输入更改为箭头。下面是最后的工作


#在提交中{
背景色：白色；
左边框：#B4C8E9；
边框顶部：#B4C8E9；
右边框：3倍纯黑；
底部边框：3倍纯黑；
宽度：15px；
高度：15px；
变换：旋转（-45度）；
利润上限：4倍；
左边距：4倍；
位置：绝对位置；
光标：指针；
}
使用Roko C.Buljan盒阴影技巧，具有悬停效果的左右箭头


.arr{
显示：内联块；
填料：1.2米；
盒影：8px 8px 0 2px#777插图；
}
A.左{
变换：旋转（-45度）；
}
A.对{
变换：旋转（135度）；
}
.arr:悬停{
盒影：8px 8px 0 2px#000插图
}


.arrow{
显示：内联块；
字体大小：10px；/*调整大小*/
线高：1em；/*调整垂直定位*/
边框：3px实心#000000；
左边框：透明；
边框底部：透明；
宽度：1em；/*使用字体大小更改整体大小*/
高度：1米