第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

帶有百分比寬度的自適應(yīng)CSS三角形

帶有百分比寬度的自適應(yīng)CSS三角形

慕桂英3389331 2019-11-30 14:48:19
下面的代碼將在<a>元素下方創(chuàng)建一個箭頭:.btn {    position: relative;    display: inline-block;    width: 100px;    height: 50px;    text-align: center;    color: white;    background: gray;    line-height: 50px;    text-decoration: none;}.btn:after {    content: "";    position: absolute;    bottom: -10px;    left: 0;    width: 0;    height: 0;    border-width: 10px 50px 0 50px;    border-style: solid;    border-color: gray transparent transparent transparent;   }<a href="#" class="btn">Hello!</a>問題在于,我們必須指示鏈接寬度才能獲得適當(dāng)大小的箭頭,因為我們無法以像素為單位指示邊框?qū)挾取H绾问鬼憫?yīng)三角形百分比為基礎(chǔ)?
查看完整描述

3 回答

?
慕尼黑的夜晚無繁華

TA貢獻(xiàn)1864條經(jīng)驗 獲得超6個贊

對此的另一種解決方案是使用CSS剪切路徑將三角形從彩色塊中剪切出來。不支持IE,但是可以用于內(nèi)部工具等。

為方便起見,與SCSS一起編寫。


.outer {

  background: orange;

  width: 25%;

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  padding: 1em;


  p {

    margin: 0;

    text-align: center;

    color: #fff;

  }


  &:after {

    content: '';

    position: absolute;

    top: 100%;

    left: 0; 

    right: 0;

    padding-bottom: 10%;

    background: orange;

    -webkit-clip-path: polygon(0% 0%, 100% 0%, 50% 100%);

    clip-path: polygon(0% 0%, 100% 0%, 50% 100%);

  }


}


查看完整回答
反對 回復(fù) 2019-11-30
?
慕姐8265434

TA貢獻(xiàn)1813條經(jīng)驗 獲得超2個贊

我找到了適用于任何寬度/高度的解決方案。您可以在linear-gradient背景中使用兩個偽元素,例如(fiddle):


.btn {

    position: relative;

    display: inline-block;

    width: 100px;

    height: 50px;

    text-align: center;

    color: white;

    background: gray;

    line-height: 50px;

    text-decoration: none;

}

.btn:before {

    content: "";

    position: absolute;

    top: 100%;

    right: 0;

    width: 50%;

    height: 10px;

    background: linear-gradient(to right bottom, gray 50%, transparent 50%)

}


.btn:after {

    content: "";

    position: absolute;

    top: 100%;

    left: 0;

    width: 50%;

    height: 10px;

    background: linear-gradient(to left bottom, gray 50%, transparent 50%)

}


查看完整回答
反對 回復(fù) 2019-11-30
  • 3 回答
  • 0 關(guān)注
  • 1209 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號