的CSS：創建使用CSS

我已經創造你附加的圖像看到的東西的CSS：創建使用CSS

現在我用這個作爲背景圖片

background-image: url("corner.png"); 
background-size: cover;

，然後添加文本壟斷邊界但我知道那裏確實存在一個CSS的解決方案，爲此創建此邊框，所以如果有人請幫我這個我試圖找到，但我沒有找到適當的解決方案

來源

2015-11-02 Sikander

有，你可以直觀地通過幾個旋鈕擺弄創建他們夫婦的網站。搜索* css邊框箭頭*或* css邊框三角形*，然後找到它們。 –

Duplicate解決了我的問題:) – Sikander

.arrow-down { 
 
    width: 200px; 
 
    height: 50px; 
 
    position: relative; 
 
    background: red; 
 
} 
 
.arrow-down:after { 
 
    content: ''; 
 
    width: 0; 
 
    height: 0; 
 
    border-left: 20px solid transparent; 
 
    border-right: 20px solid transparent; 
 
    border-top: 20px solid #f00; 
 
    position: absolute; 
 
    bottom: -19px; 
 
}

<div class='arrow-down'>fgdfgdfgfd</div>

這將幫助你。它將使用CSS創建箭頭。

https://css-tricks.com/snippets/css/css-triangle/

來源

2015-11-02 05:53:01 Mitul

一個可觀的答案！如果'這個答案沒有用'，請添加你的評論。 – KunJ

@KunJ：我不是一個倒下的人，但這個答案的最初版本是一個可能引發downvote的鏈接版本（我無法證明爲什麼其他鏈接只回答沒有得到任何）。 – Harry

是的，也許這就是爲什麼我已經添加了更多細節的代碼， – Mitul

入住這fiddle希望你是指這樣的事情。

a.tooltips { 
    position: relative; 
    display: inline; 
} 
a.tooltips span { 
    position: absolute; 
    width:140px; 
    color: #FFFFFF; 
    background: #000000; 
    height: 30px; 
    line-height: 30px; 
    text-align: center; 
    visibility: hidden; 
    border-radius: 6px; 
} 
a.tooltips span:after { 
    content: ''; 
    position: absolute; 
    top: 100%; 
    left: 50%; 
    margin-left: -8px; 
    width: 0; height: 0; 
    border-top: 8px solid #000000; 
    border-right: 8px solid transparent; 
    border-left: 8px solid transparent; 
} 
a:hover.tooltips span { 
    visibility: visible; 
    opacity: 0.8; 
    bottom: 30px; 
    left: 50%; 
    margin-left: -76px; 
    z-index: 999; 
}

來源

2015-11-02 05:56:07

感謝您的小提琴，但這不是一個工具提示acutally，它的div本身。 – Sikander

您也可以從下面的鏈接生成它並使用它。

http://apps.eky.hk/css-triangle-generator/

.arrow { 
 
    width: 250px; 
 
    height: 60px; 
 
    position: relative; 
 
    background: #333; 
 
} 
 
.arrow:after { 
 
    content: ''; 
 
    width: 0; 
 
    height: 0; 
 
    border-left: 15px solid transparent; 
 
    border-right: 15px solid transparent; 
 
    border-top: 15px solid #333; 
 
    position: absolute; 
 
    bottom: -15px; 
 
    left:25px; 
 
}

<div class="arrow"></div>

來源

2015-11-02 05:57:08

答案不應該只是鏈接到外部網站，他們應該能夠自己站立（只是在鏈接網站宕機的情況下）。請至少將生成的代碼添加到您的答案中。 – Harry

好的哈利下次我會照顧那件事:) –

這很好，但除非你更新這個答案，否則它可能會被評論者（社區）刪除，你會失去任何獲得的代表。所以，這次更好地照顧它本身:) – Harry

的CSS：創建使用CSS

回答

相關問題