NEWアイコン
<li class="icon_new topLeft"></li>

.icon_new {
    width: 40px;
    height: 40px;
    position: relative;
}
.icon_new:after {
    content: "NEW";
    display: block;
    width: 100%;
    color: #FFFFFF;
    font-weight: bold;
    font-size: 9px;
    line-height: 1;
    position: absolute;
    text-align: center;
}

.icon_new.topLeft {
    background: linear-gradient(to top left, rgba(255,255,255,0) 50%, #B22D00 50.3%) no-repeat top left/100% 100%;
}
.icon_new.topLeft:after {
    transform: rotate(-45deg);
    top: 10px;
    left: -7px;
}
斜め（type-1）

2駅3路線利用可能、ダイレクトアクセス。

CONTENTS-01
CONTENTS-02
CONTENTS-03
CONTENTS-04
CONTENTS-05
CONTENTS-06
CONTENTS-07
CONTENTS-08 
<div class="contents_ttl left">
<div class="inner">
<h1>2駅3路線利用可能、ダイレクトアクセス。</h1>
</div>
</div>

<div class="naname">
<div class="topLeft"></div>
<div class="bottomRight"></div>
コンテンツ
</div>

.contents_ttl {
    margin-bottom: 15px;
    position: relative;
    display: table;
    padding: 10px 1em 10px 1em;
    color: #FFFFFF;
}
.contents_ttl.left {
    background: linear-gradient(to right,  rgba(54,105,99,1) 0%,rgba(54,105,99,0.8) 50%);
}
.contents_ttl.right {
    background: linear-gradient(to left,  rgba(54,105,99,1) 0%,rgba(54,105,99,0.8) 50%);
    margin-left: auto;
}
.contents_ttl:before {
    content: " ";
    display: block;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(54,105,99,1);
}
.contents_ttl.left:before {
    left: -100%;
    transform: translateX(1px);
}
.contents_ttl.right:before {
    right: -100%;
    transform: translateX(-1px);
}
.contents_ttl.left {
    transform: skewX(-15deg);
}
.contents_ttl.right {
    transform: skewX(15deg);
}
.contents_ttl.left .inner {
    transform: skewX(15deg);
}
.contents_ttl.right .inner {
    transform: skewX(-15deg);
}
.contents_ttl h1 {
    font-size: 24px;
    font-weight: normal;
}
斜め（type-2）

2駅3路線利用可能、ダイレクトアクセス。

CONTENTS-01
CONTENTS-02
CONTENTS-03
CONTENTS-04
CONTENTS-05
CONTENTS-06
CONTENTS-07
CONTENTS-08 
<div class="contents_ttl right">
<div class="inner">
<h1>2駅3路線利用可能、ダイレクトアクセス。</h1>
</div>
</div>

<div class="naname">
<div class="topRight"></div>
<div class="bottomLeft"></div>
コンテンツ
</div>

.naname {
    position: relative;
    background-color: #D2F2F1;
    padding-top: 10%;
    padding-bottom: 10%;
}
.topRight,.bottomLeft,
.topLeft,.bottomRight {
    position: absolute;
    width: 100%;
    padding-top: 10%;
}
.topLeft,.topRight {
    top: 0;
}
.bottomLeft,.bottomRight {
    bottom: 0;
}
.topLeft {
    background: linear-gradient(to top right, rgba(255,255,255,0) 50%, #FFFFFF 50.3%) no-repeat top left/100% 100%;
}
.topRight {
    background: linear-gradient(to top left, rgba(255,255,255,0) 50%, #FFFFFF 50.3%) no-repeat top left/100% 100%;
}
.bottomLeft {
    background: linear-gradient(to bottom right, rgba(255,255,255,0) 50%, #FFFFFF 50.3%) no-repeat top left/100% 100%;
}
.bottomRight {
    background: linear-gradient(to bottom left, rgba(255,255,255,0) 50%, #FFFFFF 50.3%) no-repeat top left/100% 100%;
}
image
image

<div class="height_box">
<div class="sam"><img src="img/sam_ttl_tachikawa.jpg" alt=""><div class="notes shadow">image</div></div>
<div class="exp"><img src="img/sam_ttl_nishikunitachi.jpg" alt=""><div class="notes shadow">image</div></div>
</div>

.height_box {
    padding: 20px 0px 20px 0px;
}
.height_box .sam,
.height_box .exp {
    position: relative;
    display: table;
}
.height_box .sam img,
.height_box .exp img {
    width: 100%;
}
.height_box .sam {
    width: 50%;
}
.height_box .exp {
    width: 60%;
    margin-left: auto;
    z-index: 2;
    margin-top: -20%;
}