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

PS我用它:after来添加一个白色三角形,下面有一个1px的偏移量:before来复制三角形周围的边框.

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

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

这是我到目前为止的一个方面: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;
}