我正在做一个创意元素，我想将“三 Angular 形”添加到框元素以获得对话泡泡效果，并且仍然对每个元素应用不透明度，如下所示:

我可以让 block 正确显示，每个元素的右侧和底部都有一个 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);
}

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

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

我很困惑，因为任何和所有的建议都会非常感激

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

最佳答案

我自己放了一个 fiddle :http://jsfiddle.net/Pevara/8WBcQ/

这并不容易，但我想我成功了，但有一些限制:
- 我不得不在你的 .heading 中为箭头添加两个空节点。我知道它不漂亮，但我在没有它们的情况下尝试过，但无法让它工作。
- 我必须设置一个固定的宽度。可能与百分比有关，但由于它需要非常精确的定位，我什至没有尝试...(百分比和精确定位在我的经验中是行不通的)

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

它不是很干净，需要调整定位，但它可以工作(在 chrome 中，其他浏览器可能需要一些前缀)。我不敢在旧的 IE 中查看结果。可能无法在现实生活中使用网站，但作为概念证明...

在现实生活中，我可能会选择一个带有边框和箭头的 Sprite 图像，然后将 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;
}

关于html - 使用 CSS 的动态形状，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17261654/