CSS的动态形状

Question

我正在开展一个创意项目，我希望在框元素中添加“三角形”以获得语音气泡效果，并仍然对每个元素应用不透明度，如下所示：

我可以使用每个元素右侧和底部的1px寄存器正确显示块。但是，这不包括标题元素上的箭头。当我使用.heading:before添加箭头时，结果如下所示：

如您所见，原始边框保持不变，打破了箭头及其相应的元素。

我的HTML如下：

    <li class="heading">
        <div class="text_contain_head">
            <h1>Heading</h1><p>Subheading</p>
        </div>
    </li>

    <li class="options">
        <div class="text_contain">
            <h2>Option 1</h2><p>Description</p>
        </div>
    </li>

    <li class="options">
        <div class="text_contain">
            <h2>Option 2</h2><p>Description</p>
        </div>
    </li>

    <li class="options">
        <div class="text_contain">
            <h2>Option 3</h2><p>Description</p>
        </div>
    </li>

    <li class="options">
        <div class="text_contain">
            <h2>Option 4</h2><p>Description</p>
        </div>
    </li>

这里是.options的CSS：

.options {
    position: relative;
    padding-bottom: 25%;
    height: 0;
    width: 25%;
    background-color: rgba(0, 0, 0, 0.25);
    border-right: 1px solid #FFF;
    border-bottom: 1px solid #FFF;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
}

这里是.heading的CSS：

.heading {
    position: relative;
    padding-bottom: 25%;
    width: 75%;
    background-color: rgba(0, 0, 0, 0.6);

    border-right: 1px solid #FFF;
    border-bottom: 1px solid #FFF;

    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;

    padding-left: 40px;
    padding-right: 40px;
    float:left;
}

.heading:before {
    content: "\0020";
    display: block;
    border: solid 20px transparent;
    border-right-color: rgba(0, 0, 0, 0.6);

    position: absolute;
    top: 50%;
    right: -40px;
    margin-top: -20px;
    z-index: 1002;

    transform:scale(1,1.5);
    -ms-transform:scale(1,1.5);
    -webkit-transform:scale(1,1.5);
}

P.S。我使用:after在:before下面添加一个1px偏移的白色三角形来复制三角形周围的边框。

最后，我希望能够保持元素的不透明度（由于背景图像），并且仍然能够“移除”箭头重叠的原始边框。

我很难过，因为任何和所有的建议都是最令人沮丧的

这是我到目前为止的一个方面：http://jsfiddle.net/N2nZ6/1/

Answer 1

我提出了一个自己的小提琴：http://jsfiddle.net/Pevara/8WBcQ/

这并不容易，但我认为我已经逃脱了它，但有一些限制：
  - 我必须在你的.heading中为箭头添加两个空节点。我知道它不漂亮，但我试着没有它们，只是无法让它起作用   - 我必须设置一个固定的宽度。它可能与百分比有关，但由于它要求非常精确的定位，我甚至没有尝试......（百分比和确切的位置是我的经验中没有用）

它是如何工作的：
  - 我将额外的节点变成一个正方形并将它们旋转45度以使它们看起来像一个箭头点
  - 我将它们绝对放在.heading的边缘，以掩盖边界   - 我将它们设置为溢出隐藏以防止：after和：溢出之前
  - 我将背景图像设置为：之前，反向旋转45度，并准确定位以与ul的背景图像对齐   - 我添加了另一个：使用与.heading相同的半透明背景颜色，使背景完全匹配。

它不是很干净，它需要一些摆弄定位，但它的工作原理（在chrome中，其他浏览器可能需要一些前缀）。我不敢看旧IE的结果。可能不适用于现实生活中的网站，但作为概念证明......

在现实生活中，我可能会选择带有边框和箭头的精灵图像，并将li放在它们上面。

因为SO坚持认为，这里是css的一部分：

.arrow-down {
    position: absolute;
    display: block;
    overflow: hidden;
    width: 50px;
    height: 50px;
    -webkit-transform: rotate(45deg);
    top: 200px;
    left: 300px;
    background-color: rgba(0, 0, 0, .5);
    margin-left: -25px;
    z-index: 5;
    border: 1px solid #fff;
    border-left: none;
    border-top: none;
}
.arrow-down:after {
    content:' ';
    display: block;
    width: 300px;
    height: 300px;
    -webkit-transform: rotate(-45deg);
    background-repeat: no-repeat;
    background-image: url(http://www.placekitten.com/900/600);
    background-position: -114px -77px;
    z-index: 1;
    position: absolute;
    top: -100px;
    left: -150px;
}
.arrow-down:before {
    content:'';
    background-color: rgba(0, 0, 0, .5);
    z-index: 2;
    position: absolute;
    top: -5px;
    left: -5px;
    bottom: -5px;
    right: -5px;
}

Answer 2

我认为实现这种效果有点复杂，可以通过使三角形不透明并为覆盖边框的三角形保持相同的背景图像（使用适当的位置）来完成。