动态形状与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: " 020";
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添加一个白色三角形，并在:before添加一个1px的偏移量以复制三角形周围的边框。
最后，我希望能够保持元素的不透明度（由于背景图像），并且仍然能够“移除”箭头重叠的原始边界。
我很难过，因为任何和所有的建议都是最令人赞叹的
这里是我到目前为止的jsfiddle：http://jsfiddle.net/N2nZ6/1/
我已经提出了我自己的小提琴：http://jsfiddle.net/Pevara/8WBcQ/
这并不容易，但我认为我摆脱了它，但有一些限制：
- 我不得不在箭头的头部添加两个空节点。 我知道这不是很美，但我没有尝试过，只是无法让它工作。
- 我必须设定一个固定的宽度。 用百分比来做也许是可能的，但是因为它要求非常确切的定位，所以我甚至没有尝试......（根据我的经验，百分比和确切位置是不合适的）
它是如何工作的：
- 我将额外的节点变成一个正方形，并将它们旋转45度，使它们看起来像一个箭头点
- 我将它们绝对放在.heading的边缘，以掩盖边界。
- 我设置它们溢出隐藏，以防止：之后和：在溢出之前
- 我将背景图像设置在：之前，计数器旋转45度，并准确定位以与ul的背景图像对齐
- 我添加了另一个：与.heading具有相同的半透明背景色，以使背景完全匹配。
它不完全干净，并且需要一些摆动位置的操作，但它可以工作（在chrome中，其他浏览器可能需要一些前缀）。 我不敢在较老的IE浏览器中看结果。 可能无法在现实生活中使用，但作为概念证明......
在现实生活中，我可能会选择一个边界和箭头的精灵图像，并将它们放置在它们的顶部。
因为坚持，这里是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;
}
我认为达到这种效果有点复杂，可以通过使三角形不透明并为覆盖边界的三角形保留相同的背景图像（使用适当的位置）来完成。
链接地址: http://www.djcxy.com/p/14503.html