偽元素和獨特按鈕形狀背景的透明度問題
[英]Transparency issue with pseudo-elements and background on unique button shape
問題描述
我正在嘗試使用偽元素來實現一種獨特的按鈕形狀，該元素的一端變得透明，因此背景將顯示出來。 如果將背景設置為純色，則可以輕松實現所需的結果，因為我可以將::after元素更改為相同的顏色。 但是，如果背景是圖像或svg，我會努力提出解決方案。
codepen： https ：//codepen.io/codingforthefuture/pen/YzKvGvq
我將::after元素設置為白色以演示該問題，盡管您可以將其更改為粉紅色以查看所需的結果。
如果將偽元素的顏色更改為透明，則會出現問題，您會看到其他偽元素的位置。 如果刪除該偽元素，則將刪除該形狀那一端的邊框。
body{ background: pink; width: 100%; height: 100%; display: flex; justify-content: center; } a .btn-flag { padding: 0; border: 0; outline: none; text-decoration: none; } a.btn-flag strong{ position: relative; color: black; font-size: 0.8rem; bottom: -2px; right: 10px; } .btn-flag { display: inline-block; font-size: 0.7rem; min-width: 200px; height: 35px; box-sizing: content-box; padding-top: 15px; position: relative; background: yellow; color: black; font-size: 7px; letter-spacing: 0.2em; text-align: center; text-transform: uppercase; border-top: 1px solid red; border-bottom: 1px solid red; border-left: 1px solid red; margin-bottom: 20px; } .btn-flag::before, .btn-flag::after { content: ""; position: absolute; top: -1px; width: 0; height: 0; left: 87%; /*should be transparent, Should acheive same effect as setting the color from #fff to pink but without knowing background set color, possible image or svg in background*/ border-right: 26px solid #fff; border-top: 26px solid transparent; border-bottom: 26px solid transparent; } .btn-flag::before{ /* other color to change, but changing gets rid of border on flag end */ border-right: 26px solid red; border-top: 26px solid transparent; border-bottom: 26px solid transparent; left: 86.5%; } /****************************************************/
<body> <a href="#" class="btn-flag"> <strong>Example Text</strong> </a> </body>
1 個解決方案
解決方案1
0 2019-09-12 21:07:17
嘗試這樣的事情！ https://codepen.io/anonymousjoe/pen/wvwXJwz
與其嘗試使偽元素具有瘋狂的形狀和瘋狂的邊界，不如給每個偽元素一個有趣的標志形狀，然后使用陰影將它們的輪廓偽造。
filter: drop-shadow(0 -1px 0 red) drop-shadow(1px 0 0 red);
另一種選擇是將SVG用作每個偽元素的背景圖像，其放置方式與我在此處使用的相同。
將背景圖像放入帶有偽元素的形狀中
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.