的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

回答

相关问题