CSS三角形切口切出响应div与文本

Question

我正在寻找一个CSS解决方案，从div中切出一个类似三角形的凹口，响应如下图所示。

div中将包含内容，我希望它具有响应性，因此当文本更多时，或者浏览器变小时，缺口将随容器一起增长。我已经看过像this之前用CSS制作的响应箭头，但是我不确定如何改变三角形的角度并将其实现到我的div中。任何帮助，将不胜感激。

.triangle-right {
    width: 0;
    height: 0;
    padding-top: 25%;
    padding-bottom: 25%;
    padding-left: 25%;
    overflow: hidden;
}
.triangle-right:after {
    content: "";
    display: block;
    width: 0; 
    height: 0;
    margin-top:-500px;
    margin-left: -500px;
     
    border-top: 500px solid transparent;
    border-bottom: 500px solid transparent;
    border-left: 500px solid #4679BD;
}
<div class="triangle-right"></div>

Answer 1

这与您的示例有点不同，使用边框值。你把一个div放在缺口上，然后把你的常规div放在旁边。这是HTML：

<div class="container">
    <div class="notch">
    </div>
    <div class="content" >
        <label>Here is the content</label>
    </div>
</div>

这就是CSS：

div.container {
    position:relative;
}

div.notch, div.content {
    position:absolute;
}

div.notch {
    border-top: 20px solid blue;
    border-bottom: 20px solid blue;
    border-left: 10px solid transparent;
}

div.content {
    left: 10px;
    line-height: 40px;
    color: white;
    background-color: blue;
    padding: 0 10px;
}

你应该能够修补这些基本价值并改变一些事物。您可以通过更改左边框相对于顶部和底部边框的宽度来更改角度。内容div中的left必须与陷阱div中的border-left-width匹配。

还有其他一些想法here。

Answer 2

非常感谢@BobRodes帮助我找到了正确的方向！ 我拿了你的例子并添加了jQuery来获取div的高度，将它除以2以得到顶部和底部边界的值。如果div的高度不是一个整数，那么边界高度是一个分数，而缺口是1px短，所以我考虑到了这一点并在这种情况下通过增加1px来解释。我也注意到在Firefox和IE浏览器中，有时边框太高（浏览器渲染可能？）并且凹槽在内容div下面挂了1px。 Chrome看起来很好。为了解决所有这些问题，我将凹槽翻转，使其指向右侧并使其与背景颜色相同。现在，如果我有1px的悬垂，它将永远不可见。 如果我将jQuery包装在一个函数中并在调整大小时调用它，则它完全响应并且可以处理任何数量的内容 这是我的代码：

＆＃13;

＆＃13;

//find the height of the content div and use 50% of the height for the border height to create the notch
var ContentHeight = $('.Content').outerHeight(),
  BorderHeight = ContentHeight / 2,
  //we'll assume that the border-top and border-bottom will be the same, but we may need to make a tweak below
  BorderHeight2 = BorderHeight;

//if 1/2 the height of the content is a fraction, the border will be 1px short. We'll add 1px to the bottom to compensate 
if (ContentHeight % 2 === 1) {
  BorderHeight2++;
}
//add the border to create the notch
$('.Notch').css({
  'border-top': BorderHeight + 'px solid transparent',
  'border-bottom': BorderHeight2 + 'px solid transparent'
});

＆＃13;

.Wrapper {
  position: relative;
  margin: 20px 20px 20px 50px;
}
.Notch {
  border-left: 15px solid #fff;
  left: -8px;
  position: absolute;
  top: 0;
  z-index: 9999;
}
.Content {
  width: 50%;
  color: #fff;
  position: absolute;
  background: rgba(0, 0, 0, 0) linear-gradient(to right, #055aa5 0%, #227dcd 100%) repeat scroll 0 0;
  left: -8px;
  padding: 15px 15px 15px 30px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="Wrapper">
  <div class="Notch"></div>
  <div class="Content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi.</p>
    <p>Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa.</p>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;