css三角形边框怎么制作拼接在一起的?

css三角形边框怎么制作拼接在一起的?
2025-04-03 18:48:03
推荐回答(2个)
回答1:

  这位网友你好,三角形边框只是利用了一个元素的边框,元素本身宽高都为0,把边框颜色设置为透明色,然后需要的一边设置为自己想要的颜色即可。

div{
  border:20px solid transparent;
  border-left-color:#ff0000;
}

  例如上面就是一个向右的三角形。当然你可以可以利用左边框和下边框拼成一个大三角形,其他都类似。

回答2:

方法有两种:

  1. 直接引用图片;

  2. 用到css3里边的旋转功能,用三个矩形,左边向右旋转30度,只显示右边框,中间矩形只显示下边框,不旋转。右边矩形向左旋转30度,只显示左边框。

  3. 建议直接引用图片;比较省时省事。