Tim Tim - 1 year ago 132
jQuery Question

CSS triangle-like notch cut out of responsive div with text

I'm looking for a CSS solution to have a triangle-like notch cut out of a div that is responsive like the one pictured below.

enter image description here

The div will have content in it and I want this to be responsive, so as there is more text, or the browser is made smaller the notch will grow with the container. I have seen responsive arrows made with CSS before like this, but I'm not sure how change the angle of the triangle and implement it into my div. Any help would be appreciated.

.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-left: -500px;

border-top: 500px solid transparent;
border-bottom: 500px solid transparent;
border-left: 500px solid #4679BD;

<div class="triangle-right"></div>

Tim Tim
Answer Source

Many thanks to @BobRodes for getting me set in the right direction! I took your example and added jQuery to take the height of the div, divide it by 2 to have the values of the top and bottom borders. If the height of the div is not a whole number, then the border height is a fraction and the notch came up 1px short, so I took that into consideration and accounted for that by adding 1px in that case. I also noticed in Firefox and IE, sometimes the border was too tall (Browser rendering maybe?) and the notch hung below the content div by 1px. Chrome seemed to be fine. To get around all of this, I reversed the notch so that it was pointing to the right and made this the same color as the background color. Now if I have a 1px overhang, it will never be visible. If I wrap my jQuery in a function and call that on resize, this is completely responsive and works with any amount of content.
Here is my code:

//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) {
//add the border to create the notch
  '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>