使用 CSS 的动态形状

Question

我正在从事一个创意项目，我想在盒子元素中添加“三角形”以获得对话气泡效果，并且仍然对每个元素应用不透明度，如下所示：

我可以让块正确显示，每个元素的右侧和底部都有一个 1 像素的边框。但是，这不包括标题元素上的箭头。当我添加箭头时，使用.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);
}

附：我使用:after 在:before 下方添加一个偏移1px 的白色三角形，以复制三角形周围的边框。

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

我被难住了，因此任何和所有建议都会非常感激

这是我目前所拥有的一个 jsfiddle：http://jsfiddle.net/N2nZ6/1/

Answer 1

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

这并不容易，但我想我成功了，但有一些限制：
- 我必须在 .heading 中为箭头添加两个空节点。我知道它不漂亮，但我尝试不使用它们，但无法让它发挥作用。
- 我必须设置一个固定的宽度。可能与百分比有关，但由于它需要非常精确的定位，所以我什至没有尝试...（根据我的经验，百分比和精确定位是不行的）

它是如何工作的：
- 我将多余的节点变成一个正方形并将它们旋转 45 度以使它们看起来像一个箭头点
- 我将它们绝对定位在 .heading 的边缘之上，以掩盖边界。
- 我将它们设置为溢出隐藏以防止 :after 和 :before 溢出
- 我在 :before 上设置了背景图像，反向旋转 45 度，并准确定位到与 ul 的背景图像对齐
- 我添加另一个 :after 与 .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

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