鍍金池/ 問答/HTML5  HTML/ 純css斜箭頭

純css斜箭頭

clipboard.png

如上圖，請(qǐng)問這種斜箭頭怎么實(shí)現(xiàn)。網(wǎng)上找了方法，設(shè)置四個(gè)方向的border，實(shí)現(xiàn)斜箭頭。但是不能實(shí)現(xiàn)中間是透明的，求指教。

目前只找了個(gè)斜箭頭，不過只是內(nèi)斜的，不能向外斜，且不能透明

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

clipboard.png

回答
編輯回答
清夢(mèng)

之前看到過用純css畫了一個(gè)很復(fù)雜的動(dòng)畫人物，可以看出css還是挺強(qiáng)大的，不過目前來說，用css畫圖確實(shí)不怎么樣，可以考慮用canvas，或者直接叫美工畫一個(gè)。如果非要用css，可以去網(wǎng)上找找，應(yīng)該有類似文章，不過歸根結(jié)底都不是非常規(guī)范的做法，而且兼容性也可能有問題。

2018年8月8日 13:57
編輯回答
小眼睛

如果是這種箭頭用CSS做的話，我想可以做兩個(gè)外形一樣，但大小不一樣的，大三角是白色，小三角是藍(lán)色，小三角蓋住大三角。但即使能做出來，估計(jì)也沒人這么干。我以前在幾個(gè)網(wǎng)站上見過類似的這種箭頭，無一例外都是用的小三角的背景圖。只有純色的三角才會(huì)有的網(wǎng)站用CSS的border做。

2017年10月11日 16:39
編輯回答
別瞎鬧

用canvas畫

2018年9月2日 21:03
編輯回答
默念

這不就是2條線嗎？

2017年2月8日 20:49
編輯回答
怣痛
.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;
    }
2017年9月15日 11:15