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。