在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

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

純css斜箭頭

clipboard.png

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

目前只找了個斜箭頭，不過只是內(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

回答
編輯回答
清夢

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

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

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