css用伪类如何制作左右箭头三角形

发布网友发布时间：2022-04-23 03:35

共1个回答

热心网友时间：2022-04-27 17:16

我在另一个问题里面涉及到了这个，你可以参考一下。网页链接

伪类你也可以理解为一个容器，不过为了展示顺利需要添加 content: ''; 和display：block；为了能够准确定位，需要结合其容器设置定位，这都是基础不需要多介绍。

使用伪类做左右的箭头主要是需要了解边框的构成

{
border: 20px solid #333;
   border-top-color: #369;
   border-bottom-color: red;
   border-left-color: green;
   border-radius: 0;
}

如图，我用四个颜色分别给四条边上色，可以看出来每一个边在宽度大于1的时候表现出的样子就倾向于一个梯形。

而我们可以理解为三角形其实就是梯形的一条底边长度为零。

那么为了得到一个三角形那么我们只需要容器的宽高都为零就可以了,如图：

{
   border: 20px solid #333;
   border-top-color: #369;
   border-bottom-color: red;
   border-left-color: green;
   border-radius: 0;
   font-size: 0;
   width: 0;
   height: 0;
   padding: 0;
}

下一步我们只留下一个三角形。

只要让不需要展示的边颜色为透明就可以了

{
   border: 20px solid transparent;
   /* border-top-color: #369; */
   /* border-bottom-color: red; */
   border-left-color: green;
   border-radius: 0;
   font-size: 0;
   width: 0;
   height: 0;
   padding: 0;
}

这样你拿到的是上下左右四个方向的三角形，同样的你如果需要的是斜向右上角的或者其他角度的，只要自己凑出这个方向就可以，类似于七巧板。

如果希望三角形呈现的不是直角三角形可以修改各个边的宽度。。

{
   border: 20px solid transparent;
   border-top-color: #369;
   /* border-bottom-color: red; */
   border-left-color: green;
   border-radius: 0;
   font-size: 0;
   width: 0;
   height: 0;
   padding: 0;
}