创建箭头型背景div
创建箭头型背景div
提问于 2015-06-10 21:28:53
我如何用CSS创建这个程序：
我试过使用::after和：：and，每一个都使用transform:斜交(20 and )或斜-20 and，但是只有当副标题适合一行时，它才能工作，而且不能保证这一点。
有麻烦，可能真的需要一个或两个指针。我试图支持IE9和up，但更重要的是移动操作系统的安卓4+和iOS 7+
我也愿意使用SVG。我只是不太熟悉它与HTML的集成。
回答 2
Stack Overflow用户
回答已采纳
发布于 2015-06-10 21:54:10
可以做到这一点：http://jsbin.com/kotisisilu/2/edit?html,css,output
要做到这一点，我使用: are和:after白色元素，这些元素在元素的右侧旋转，以覆盖角并使其看起来像箭头。
这方面的问题是，覆盖元素必须有相同的颜色背景。
它也可以处理多行，但是您需要做一些调整来处理两行以上，您可以根据最大的行数来调整它。
使用css很难做到这一点，使用SVG将很有趣，在IE9中，使用带图像或不带箭头的回退。
编辑
SVG示例：http://jsbin.com/viserozumo/2/edit?html,css,output
CSS：
div#arrow {
position: relative;
font-family: "Arial";
background-color: #123456;
color: white;
font-size: 2em;
padding: 10px 15px 10px 15px;
display: inline-block;
}
div#arrow svg {
position: absolute;
top: 0px;
right: -30px;
}和带有SVG的HTML
<div id="arrow">
The awesome text<br>
Multiline!
<svg width="30px" height="100%" viewBox="0 0 10 10" preserveAspectRatio="none">
<polygon fill=#123456 stroke-width=0 points="0,0 10,5 0,10" />
</svg>
</div>Stack Overflow用户
发布于 2015-06-10 21:55:55
实际上，您可以使用边框绘制三角形，而不是将其放置在content之外。
.arrow {
background : gray;
width : 250px;
height : 50px;
position : relative;
}
.arrow:after {
content : '';
display : block;
position : absolute;
right: -20px;
top : 0;
width: 0;
height: 0;
border-style: solid;
border-width: 25px 0 25px 20px;
border-color: transparent transparent transparent #007bff;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30767628
复制相关文章
相似问题
腾讯云开发者
