我可以製作純CSS的標籤邊框嗎？

我想給一個元素的無邊框，頂部帶有標籤的右下角是這樣的：我可以製作純CSS的標籤邊框嗎？

由於這將是一個Adobe商業催化劑模板中重複的元素，我希望它是純粹的CSS或至少CSS和JavaScript，沒有使用任何圖像。有什麼辦法可以做到嗎？

由於它只是一個裝飾元素，因此它不一定是跨瀏覽器。

來源

2012-11-27 ShrimpWonder

當然可以做到。你試過什麼了？ –

請顯示您嘗試達到此目的的代碼，以便我們提供建議。 –

我不知道從哪裏開始，真的。我嘗試在右側應用邊框，但這肯定會失敗。使用div很容易，但由於它是單個元素，我不能使用div，添加僞元素的內容將無法工作，因爲我無法設計它。 – ShrimpWonder

看一看這樣的：

http://jsfiddle.net/8hB7E/

HTML：

<body> 
<div class="element"> 

</div> 
</body>

CSS：

body { background: #555 } 

.element { background: #000; border-top: 2px solid #fff; height: 100px; position: relative; width: 300px; } 

.element:after { background: #fff; content: " "; height: 10px; position: absolute; right: 0; top: 0; width: 20px; }

它利用：after僞元素（我覺得這真的很有用！）

不幸的是這不會在IE7或6的工作 - 這不是核心，以網站的功能了，所以我說這是確定不變。

來源

2012-11-27 16:36:44 Sean

這似乎是最完美的解決方案！謝謝！ – ShrimpWonder

沒問題，很高興我可以幫助:) – Sean

我可以製作純CSS的標籤邊框嗎？

回答

相關問題