创建箭头背景div

Question

如何使用CSS创建此内容：

我尝试过使用:: after和::之前，每个都使用transform：skew（20deg）或者skew -20deg，但是只有当字幕适合一行时才会有效，并且＆＃; 39;不能保证。

遇到麻烦，真的可以使用一两个指针。我试图支持IE9及以上，但更重要的是移动操作系统的Android 4+和iOS 7 +

我也愿意使用SVG。我不太熟悉将它与HTML集成。

Answer 1

可以做到这一点：http://jsbin.com/kotisisilu/2/edit?html,css,output

为此，我使用：before和：在元素右侧旋转的白色元素覆盖角落并使其看起来像箭头。

问题在于遮盖元素必须与背景颜色相同。

它也可以处理多行，但你需要做一些调整来处理两行以上，你可以考虑最多的行来调整它。

使用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>

Answer 2

您实际上可以使用边框绘制三角形，而不是将其放在内容div之外。

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

DEMO