panels with cut corners

index.html

<div class="paneldogear">
  <div class="cutthecorner marianblue mariangoldmu mariandarkgraymu marianlightgraymu">
    <h2>Typical Heading</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque quasi velit laudantium totam consequatur aliquam possimus quidem ullam esse nemo excepturi alia. <a href="#">And this is a link</a> </p>
  </div>
</div>

panels-with-cut-corners.markdown

panels with cut corners

A Pen by ed ventura on CodePen.

License.

style.scss

$marianblue: #031e51;
$mariangold: #ffc107;
$mariandarkgray: #464646;
$marianlightgray: #e4e4e4;
.paneldogear {
  overflow: hidden; padding: 0 0 30px;
  .cutthecorner {
    padding: 10px 15px 3px; 
    position: relative;
    a:link, a:visited {text-decoration: underline;}
    h2, h3, h4 {
      font-size: 23px;
      font-weight: 700;
    }
    &:before {
        content: "";
        width: 100%;
        height: 30px;
        position: absolute;
        top: 100%;
        right: 30px;
      }
    &:after {
        content: "";
        width: 0;
        height: 0;
        margin-left: -30px;
        position: absolute;
        top: 100%;
        left: 100%;
      }
    
//  .marianblue panel
    &.marianblue {
      background: $marianblue; 
      color: #ffffff;
      a:link, a:visited {color:#ffffff; text-decoration:underline;}
      h2, h3, h4 {
        color: $mariangold;
      }
      &:before {
        background: $marianblue;
      }
      &:after {
        border: 15px solid $marianblue;
        border-right: 15px solid transparent;
        border-bottom: 15px solid transparent;
      }
    }
//  .mariangold panel
    &.mariangold {
      background: $mariangold; 
      color: $marianblue;
      h2, h3, h4 {
        color: $marianblue;
      }
      &:before {
        background: $mariangold;
      }
      &:after {
        border: 15px solid $mariangold;
        border-right: 15px solid transparent;
        border-bottom: 15px solid transparent;
      }
    }    
//  .mariandarkgray panel
    &.mariandarkgray {
      background: $mariandarkgray; 
      color: #ffffff;
      h2, h3, h4 {
        color: $mariangold;
      }
      &:before {
        background: $mariandarkgray;
      }
      &:after {
        border: 15px solid $mariandarkgray;
        border-right: 15px solid transparent;
        border-bottom: 15px solid transparent;
      }
    }        
//  .marianlightgray panel
    &.marianlightgray {
      background: $marianlightgray; 
      color: $marianblue;
      h2, h3, h4 {
        color: $marianblue;
      }
      &:before {
        background: $marianlightgray;
      }
      &:after {
        border: 15px solid $marianlightgray;
        border-right: 15px solid transparent;
        border-bottom: 15px solid transparent;
      }
    }  
    
  }
}