纯css斜箭头

clipboard.png

如上图,请问这种斜箭头怎么实现。网上找了方法,设置四个方向的border,实现斜箭头。但是不能实现中间是透明的,求指教。

目前只找了个斜箭头,不过只是内斜的,不能向外斜,且不能透明

width: 0;
height: 0;
border-left: 57px solid transparent;
border-right: 17px solid transparent;
border-top: 30px solid #777;
font-sie: 0;

clipboard.png

阅读 5.4k
5 个回答
.line {
      position: relative;
      display: block;
      width: 400px;
      height: 200px;
      border: 6px solid #65A7EF;
    }

    .line::after {
      content: '';
      position: absolute;
      width: 82px;
      height: 30px;
      border-right: 8px solid #65A7EF;
      border-bottom: 4.5px solid #65A7EF;
      transform: rotate(34deg) skew(51deg);
      left: 133px;
      top: -18.7px;
      z-index: 1;
      background: #fff;
    }

如果是这种箭头用CSS做的话,我想可以做两个外形一样,但大小不一样的,大三角是白色,小三角是蓝色,小三角盖住大三角。但即使能做出来,估计也没人这么干。我以前在几个网站上见过类似的这种箭头,无一例外都是用的小三角的背景图。只有纯色的三角才会有的网站用CSS的border做。

用canvas画

之前看到过用纯css画了一个很复杂的动画人物,可以看出css还是挺强大的,不过目前来说,用css画图确实不怎么样,可以考虑用canvas,或者直接叫美工画一个。如果非要用css,可以去网上找找,应该有类似文章,不过归根结底都不是非常规范的做法,而且兼容性也可能有问题。

这不就是2条线吗?

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题