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

Question

我正在寻找一个CSS解决方案，有一个三角形切口切出的响应像下图所示的一个div。

股利将在它的内容，我想这是有求必应，从而有更多的文本或浏览器是由更小的缺口将与容器成长。我曾看过用CSS制作的响应箭头，例如this，但我不确定如何更改三角形的角度并将其实施到我的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

非常感谢@BobRodes让我朝着正确的方向前进！ 我拿你的例子，并添加jQuery采取div的高度，除以2以具有顶部和底部边界的值。如果div的高度不是整数，那么边框的高度就是一个分数，缩略图的长度缩短了1px，所以我考虑了这一点，并在这种情况下加上了1px。我也注意到在Firefox和IE浏览器中，有时边框太高（浏览器渲染可能？），并且凹槽挂在内容div下方1px。 Chrome似乎很好。为了解决所有这些问题，我倒转了凹口，使其指向右侧，并使其与背景颜色相同。现在，如果我有一个1px的突出部分，它将永远不可见。 如果我把我的jQuery包装在一个函数中，并调用它来调整大小，这是完全响应并且可以处理任意数量的内容。
这里是我的代码：

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

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

<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>

Answer 2

这与您的示例有些不同，使用边框值。你把一个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必须与notch格中的border-left-width相匹配。

还有一些其他的想法here。