7

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

具有语音气泡效果和不透明度的 CSS 块

我可以在每个元素的右侧和底部使用 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来复制三角形周围的边框。

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

我很难过，因此任何和所有的建议都会非常感激

这是我到目前为止所拥有的 jsfiddle：http: //jsfiddle.net/N2nZ6/1/

4

2 回答 2

3

我提出了自己的小提琴：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;
}
于 2013-06-23T18:19:05.653 回答
0

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

于 2013-06-23T15:39:41.793 回答