我正試圖建立一個歐盟能源效率評級小工具，它看起來像這樣：
然而，我正在努力創建箭頭形狀，以便對高度/寬度的變化做出反應，另外我還需要在每個箭頭周圍有一個黑色的邊框。 這是我到現在為止為每個箭頭想出的辦法：
span {
display: flex;
flex-direction: row;
align-items: center;
font-weight: 700;
font-size: 1em;
color: white;
padding: 2%;
高度：70%。
背景。#3b7634;
寬度：10%。
}
span::before {
top: 0;
背景：線性梯度（向右上方，紅色50%，透明50%）。
}
span::after {
底部。0;
背景: 線性漸變(向右下方，紅色50%，透明50%)。
這看起來像這樣：
請注意尖端太 "尖 "了，有點粗糙。這確實是回應式的，但它并不漂亮，也不可能在整個主體 尖端周圍應用邊框，因為尖端是使用線性梯度創建的。
那么，是否有更好的方法來實作呢？ 我正在使用 Angular。 謝謝。
uj5u.com熱心網友回復：
你會想使用一個三角形而不是一個線性梯度。例如：
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/306765.html
標籤：
上一篇：相同的代碼在不同的計算機上使用超過一倍的RAM記憶體
下一篇：<p>我嘗試將FBSDKCoreKit更新到最新版本（11.2.0），但由于Podfile中指定的版本，它沒有發揮作用。目前的版本是5.15.1。 Xcode版本_12.4 我怎樣才能更新