html – 将div的右侧作为箭头

概述我在页面上有一个简单的div： <div>Some Text</div> 使用CSS可以使其完成箭头.就像是： UPDATE 这是我用web-tiki提出的解决方案的结果： 看到箭头上的切口？ 谢谢, 米格尔 编辑： 如果您需要箭头来适应文本的高度(考虑可以在几行上显示)您可以使用 linear-gradient背景的箭头. FIDDLE 这可以使它： FIDDLE CSS： div{ h 我在页面上有一个简单的div：

<div>Some Text</div>

使用CSS可以使其完成箭头.就像是：

UPDATE

这是我用web-tiki提出的解决方案的结果：

看到箭头上的切口？

谢谢,
米格尔

解决方法 编辑：
如果您需要箭头来适应文本的高度(考虑可以在几行上显示)您可以使用 linear-gradient背景的箭头.

FIDDLE

这可以使它：

FIDDLE

CSS：

div{    height:40px;    background:red;    color:#fff;    position:relative;    wIDth:200px;    text-align:center;    line-height:40px;}div:after{    content:"";    position:absolute;    height:0;    wIDth:0;    left:100%;    top:0;    border:20px solID transparent;    border-left: 20px solID red;}

总结

以上是内存溢出为你收集整理的html – 将div的右侧作为箭头全部内容，希望文章能够帮你解决html – 将div的右侧作为箭头所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。