Question

我有一些像这样的酒吧形式的内容：
enter image description here
但我需要指向边缘（或条的末端）。为此，我添加了另一个带white边框的div。但是，使用这种方法我可以隐藏一个div的内容，但其他div的内容仍然可见
我尝试使用z-index修复它，但没有运气。

问题：
enter image description here
JS Fiddle setup

P.S。：

由于浏览器支持不一致，无法使用clip-path，shape-inside，shape-outside。
第三个div的内容是透明的。

.parent {
  left: 0.00%;
  width: 100%;
  height: 40px;
  display: block;
}
.child {
  width: 62%;
}
.row1 {
  height: 24px;
  width: 100%;
  display: block;
  opacity: .25;
  background-color: blue;
}
.row2 {
  height: 16px;
  background-color: blue;
  width: 100%;
  display: block;
}
.row3 {
  background-color: red;
  float: right;
  margin: -40px 0 0 0px;
  border-top: 20px solid white;
  border-bottom: 20px solid white;
  border-left: 20px solid transparent;
}

<div class="parent">
  <div class="child">
    <div class="row1">
    </div>
    <div class="row2">
    </div>
    <div class="row3">
    </div>
  </div>
</div>

Answer 1

只需删除此行，这是不需要的，因为块元素占用了所有可用空间：

.row1 {
  width: 100%;
}

然后添加一些余量，以减少可用空间：

.row1 {
  margin-right: 20px;
}

.parent {
  left: 0.00%;
  width: 100%;
  height: 40px;
  display: block;
}
.child {
  width: 62%;
}
.row1 {
  height: 24px;
  margin-right: 20px;
  display: block;
  opacity: .25;
  background-color: blue;
}
.row2 {
  height: 16px;
  background-color: blue;
  width: 100%;
  display: block;
}
.row3 {
  background-color: red;
  float: right;
  margin: -40px 0 0 0px;
  border-top: 20px solid white;
  border-bottom: 20px solid white;
  border-left: 20px solid transparent;
}

<div class="parent">
  <div class="child">
    <div class="row1"></div>
    <div class="row2"></div>
    <div class="row3"></div>
  </div>
</div>

Answer 2

给父div一个箭头背景，将其位置设置在右上方，然后给它一个等于背景宽度的右边距。应该这样做。不需要row3。

Answer 3

你可以摆脱.row3，并使用这个CSS三角形作业（假设你的小提琴中的.child的高度是它将会很容易修复其他大小）。这是my jsFiddle。

.child:after {
content:"";
display:block;
position:absolute;
right:-20px;
top:0;
width: 0;
height: 0;
border-style: solid;
border-width: 20px 0 20px 20px;
border-color: transparent transparent transparent #007bff;
}

Answer 4

这是一种不同的方法，但这是一种选择。

使用border属性创建一个箭头，并将其浮动到另一个用作条形的div。使用CSS渐变作为颜色栏的选项。基于使用CSS tricks.com中的CSS创建箭头点 http://css-tricks.com/snippets/css/css-triangle/

<强> CSS

  .arrow-right {
        position:relative;
        float:left;
        border-left: 40px solid blue;
        border-top: 40px solid transparent;
        border-bottom: 40px solid transparent;
        width:0;
        height:0;
    }
    .bar {
        width:300px;
        height:80px;
        background: blue;
        float:left;
    }

<强> HTML

<div class="bar"></div>
<div class="arrow-right">

小提琴示例：http://jsfiddle.net/djwave28/9btLx621/

使用CSS渐变的双色条小提琴：http://jsfiddle.net/djwave28/9btLx621/2/

修改使箭头看似是内容div的一部分。

＆＃13;
＆＃13;
#content { position: relative; width: 290px; min-height: 40px; background: #ddd; height: auto; padding: 5px; } #content:after { position: absolute; right: -30px; bottom: 0; border-left: 30px solid #ddd; border-top: 30px solid transparent; border-bottom: 30px solid transparent; width: 0; height: 0; content: " "; }
＆＃13;
 <div id="content"> <p>Some text</p> <p>Some text</p> <p>Some text</p> <p>Some text</p> </div>
＆＃13;
＆＃13;
＆＃13;

Answer 5

看看这个css风格：

.row3 {
background-color: red;
float: right;
margin: -40px 0 0 337px;
border-top: 20px solid white;
border-bottom: 20px solid white;
border-left: 20px solid transparent;
position: absolute;
}

小提琴：http://jsfiddle.net/jeyL3hqf/4/

将DIV重叠超过2个其他DIV

5 个答案: