帶實線邊框的CSS梯形按鈕

Question

是否可以像上圖那樣創建梯形按鈕？ 我在網上搜索，但找不到任何顯示邊框的解決方案。

編輯：似乎我的問題不清楚或只是不夠了解。 無論如何，其他線程僅顯示如何通過連接2個元素來創建梯形，但是如何在其上添加邊框？

Answer 1

 .trapezoid { width: 230px; text-align: center; height: 0; position: relative; border-right: 50px solid transparent; border-top: 40px solid #2963BD; border-left: 50px solid transparent; box-sizing: content-box; } .trapezoid span { position: absolute; top: -30px; left: 25%; color: #fff; } 

 <div class="trapezoid"><span>Trapezoid Button</span></div> 

Answer 2

嘗試以下代碼：

選項1：純CSS

這種方法的邏輯是在底部添加一個粗邊框，在右側添加一個透明透明邊框，以實現Tab效果。

• 優點：極少的樣式，非常容易理解。
• 缺點：自定義方面非常有限（即無法在選項卡上添加邊框）

 .tabs { display: flex; flex-direction: row; } .tab { height: 0; width: 120px; border-bottom: 50px solid #CCCCCC; border-right: 20px solid transparent; border-top-left-radius: 5px; box-sizing: border-box; display: block; } .tab:not(:first-child) { margin-left: -10px; z-index: 0; } .tab .label{ padding: 15px; text-align: center; color: #444444; } .active { border-bottom: 50px solid #444444; z-index: 10; } .active .label{ color: #ffffff; } 

 <div class="tabs"> <div class="tab active"><div class="label">TAB 1</div></div> <div class="tab"><div class="label">TAB 2</div></div> <div class="tab"><div class="label">TAB 3</div></div> </div> 

選項2：使用SVG作為標簽背景

這種方法的邏輯是使用兩個單獨的矢量圖像（svg）作為嵌入式背景圖像：

• 優點：非常可定制； 可以在標簽上添加邊框，可以在標簽上添加漸變背景。
• 缺點：需要有關svg的基礎知識。

 .tabs { display: flex; flex-direction: row; overflow: visible; padding-left: 15px; } .tab { height: 0; width: 130px; height: 38px; margin-left: -15px; z-index: -1; cursor: pointer; background-size: contain; background: transparent url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width=\\"121px\\" height=\\"38px\\" viewBox=\\"0 0 121 38\\"><path d=\\"M0.786477689,37.3880765 L0.786477689,5 L0.786477689,5 C0.786477689,2.790861 2.57733869,1 4.78647769,1 L102.838012,1 L102.838012,1 C104.471746,1 105.941285,1.99354246 106.549997,3.50964209 L120.152151,37.3880765 L0.786477689,37.3880765 Z\\" stroke=\\"#979797\\" fill=\\"#F0F0F0\\"></path></svg>") no-repeat; } .tab .label{ box-sizing: border-box; padding: 12px; text-align: center; color: #444444; font: 13px arial, sans-serif; width: 90%; } .active { background: transparent url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width=\\"121px\\" height=\\"38px\\" viewBox=\\"0 0 121 38\\"><path d=\\"M0.786477689,37.3880765 L0.786477689,5 L0.786477689,5 C0.786477689,2.790861 2.57733869,1 4.78647769,1 L102.838012,1 L102.838012,1 C104.471746,1 105.941285,1.99354246 106.549997,3.50964209 L120.152151,37.3880765 L0.786477689,37.3880765 Z\\" stroke=\\"#2D94B5\\" fill=\\"#2D94B5\\"></path></svg>") no-repeat; z-index: 10; } .active .label{ color: #ffffff; } 

 <div class="tabs"> <div class="tab"><div class="label">TAB 1</div></div> <div class="tab"><div class="label">TAB 2</div></div> <div class="tab active"><div class="label">TAB 3</div></div> <div class="tab"><div class="label">TAB 4</div></div> </div> 

如果要更改背景（填充）和邊框（描邊）的顏色，只需分析.tab和.active類，查找background屬性，然后在嵌入式svg上搜索/編輯以下內容：

• 對於普通標簽： stroke=\\"#979797\\" fill=\\"#F0F0F0\\"
• 對於活動標簽： stroke=\\"#2D94B5\\" fill=\\"#2D94B5\\"

希望對您有幫助

Answer 3

 .tabButton{ background: #ff0000; width: 100px; padding: 5px; position: relative; } .tabButton:before{ content: ' '; position: absolute; top: 8px; right: -20px; border: 20px solid transparent; border-top-color: #ff0000; transform: rotate(45deg) } 

 <div class="tabButton"> Navigator </div>