首頁猿問帶有百分比寬度的自適應CSS三角形

帶有百分比寬度的自適應CSS三角形

CSS3 Html/CSS

慕桂英3389331 2019-11-30 14:48:19

下面的代碼將在<a>元素下方創建一個箭頭：.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>問題在于，我們必須指示鏈接寬度才能獲得適當大小的箭頭，因為我們無法以像素為單位指示邊框寬度。如何使響應三角形百分比為基礎？

查看完整描述

3 回答

慕尼黑的夜晚無繁華

TA貢獻1864條經驗獲得超6個贊

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

為方便起見，與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%);

}

反對回復 2019-11-30

慕姐8265434

TA貢獻1813條經驗獲得超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%)

}

反對回復 2019-11-30

xieshuangting
試過了會有鋸齒

回復 2021-02-18

3 回答
0 關注
1203 瀏覽

關注

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

帶有百分比寬度的自適應CSS三角形

帶有百分比寬度的自適應CSS三角形

3 回答

相關問題推薦

添加回答

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

帶有百分比寬度的自適應CSS三角形

帶有百分比寬度的自適應CSS三角形

3 回答

相關問題推薦

添加回答