Css：使用css创建角边框[重复]答案

【问题标题】：Css : creating cornered border using css [duplicate]Css：使用css创建角边框[重复]
【发布时间】：2016-02-01 23:23:37
【问题描述】：

我必须创建一些你在附加图片中看到的东西

现在我用这个作为背景图片

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

然后添加文本，但我知道确实存在为此创建此边框的 css 解决方案，所以如果有人请帮我解决这个问题，我试图找到但我没有找到合适的解决方案

【问题讨论】：

有几个网站，您可以通过摆弄几个旋钮来直观地创建它们。搜索 css 边框箭头 或 css 边框三角形 之类的内容，您应该会找到它们。
复制解决了我的问题:)

标签： html css twitter-bootstrap css-shapes

【解决方案1】：

您也可以从以下链接生成并使用它。

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;
}

&lt;div class="arrow"&gt;&lt;/div&gt;

【讨论】：

答案不应该只是指向外部站点的链接，它们应该能够独立存在（以防万一链接的站点出现故障）。请至少将生成的代码添加到您的答案中。
ok Harry 下次我会处理那件事 :)
没关系，但除非您更新此答案，否则评论者（社区）可能会删除它，并且您将失去因此而获得的任何代表。所以，这次最好自己照顾好它:)
您的答案有 2 票赞成，但也被标记为低质量帖子。最好使用相关代码更新答案以避免删除。

【解决方案2】：

.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;
}

&lt;div class='arrow-down'&gt;fgdfgdfgfd&lt;/div&gt;

这将对您有所帮助。它将使用 css 创建箭头。

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

【讨论】：

一个可观的答案！如果“此答案无用”，请同时添加您的 cmets。
@KunJ：我不是投反对票的人，但这个答案的初始版本是一个仅链接版本，可能会引发投反对票（我无法证明为什么其他链接只回答也没有得到任何东西）。
是的，这可能就是我添加代码以获得更多细节的原因，
如果这就是为什么@kushalkant 投票的原因:(
@Harry，感谢您的回复和贡献！对的说。如果 mitul 改进了他的回答，反对者应该改变他/她的投票:)

【解决方案3】：

检查这个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;
}

【讨论】：

感谢您的提琴，但实际上这不是一个工具提示，它的 div 本身。