CSS，是否可以創建這個角落效果

我的CSS功能非常有限。我不知道是否有創建該類型的效果的方式：CSS，是否可以創建這個角落效果

這裏的直播現場，我已經有陰影。我只需要把這兩個紅色的角落元素。

在此先感謝您的任何幫助！

2011-03-29 Denise

哎呀，這裏的直播現場與陰影框：HTTP：// www.wendyfawcettlaw.com/ – Denise 2011-03-29 02:54:17

僅供參考 - 具有巨大陰影（即8）的現場網站上的文字非常難以閱讀。你可能會認爲它有點讓人失望。另一方面FF 4看起來不錯。 – NotMe 2011-03-29 04:00:21

我不認爲這是可能的純粹的CSS，你可能需要一些額外的HTML。我的建議是使用一些絕對定位的DIV與紅色的角落。

2011-03-29 03:03:24 dvhh

乾杯。

2011-03-29 03:24:18

你應該把它們放在後面，否則我不能選擇角落裏的文字。 – alex 2011-03-29 03:28:34

應該指出，IE8及以下版本不支持box-shadow屬性（即不會出現陰影），因此請務必評估您網站的目標受衆，並在必要時爲這些瀏覽器設置適當的回退。 – peterjmag 2011-03-29 03:45:49

@alex謝謝。 @Denise您可以移動段落上方的redcorner div，以便能夠在角落中選擇文本。 @peterjmag謝謝你的提示。 @Denise peterjmag是正確的，如果你想在IE中出現陰影，你應該創建一個後備。 – 2011-03-29 05:50:43

您可以使用1張單張圖像進行此操作，然後僅使用一個元素將圖像與邊框圖像平鋪。非常乾淨簡約的標記和CSS。如果你對這個解決方案感興趣，我可以發佈一個關於它是如何工作的解釋，因爲它起初很難理解，但一旦你得到它，你可以做出一些非常酷的邊界。

2011-03-29 03:32:35 Mark

我寧願建議使用圖片，因爲您可以稍後改變您想要做的任何風格，併爲您的網站插入有趣的設計變化樂趣。

@Jaffaff Gilbert已經給你提供了簡單的html + css代碼的解決方案，我會告訴你關於使用多個背景的CSS3。

而你並不需要添加HTML（但只會或每體面的瀏覽器無法正常工作的Internet Explorer）

background: 
    url(image_1.gif) top left no-repeat, 
    url(image_2.gif) bottom right no-repeat;

2011-03-29 03:41:00 Littlemad

謝謝，這個替代方法很有用。 @Denise如果你不考慮IE8（需要後備），你最好添加這種方式。 – 2011-03-29 05:58:48

回答