2016-07-01 12 views
3

CSSを使用してこのデザインを試してみましょう。次のようにDIVのオーバーレイ台形図

enter image description here

パーツは以下のとおりです。

  1. background image
  2. 私はを見て撮影した水平テキスト

と透明backgroundと台形であるがありますTwo-tone background split by diagonal line using cssしかし、まだ少し詰まっています。

CSSは強みではありません!

提案がありますか?

+1

歪んだdivのような外観の種類 '#theDiv {border:3px solid black; transform:スキュー(0、-10deg); } spanテキストは#theDiv上に絶対配置されています。 – markE

+0

このサイトをご覧ください:http://www.oca.nz/これはたくさん使っています –

+0

[here](https://jsfiddle.net/hqhmx78e/)の2つの要素を使ったクイックデモ: – jbutler483

答えて

3

@markEは、これを達成するための良い方法を述べたように(rgbabackgroundでプロパティを使用して)オーバーレイ効果を達成するために平行四辺形div

注意を.wrapposition:relativeposition:absoluteを使用しskew

を使用しています:これは平行四辺形であり、台形ではありません。これは将来の検索で役立つかもしれません。

*, 
 
*::before, 
 
*::after { 
 
    box-sizing: border-box 
 
} 
 
body { 
 
    margin: 0 
 
} 
 
.wrap { 
 
    position: relative; 
 
    border: 5px solid black; 
 
    height: 500px; 
 
    width: 100%; 
 
    background: url("//lorempixel.com/1200/600") 
 
} 
 
.parallelogram { 
 
    position: absolute; 
 
    right: 0px; 
 
    top: 100px; 
 
    width: 350px; 
 
    height: 250px; 
 
    background: rgba(255, 255, 255, .5); 
 
    border: solid black; 
 
    border-width: 5px 0 5px 5px; 
 
    transform: skew(0, -15deg); 
 
} 
 
span { 
 
    display: block; 
 
    transform: skew(0, 15deg); 
 
    margin: 70px 30px 0; 
 
}
<div class="wrap"> 
 
    <div class="parallelogram"><span>title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 </span> 
 
    </div> 
 
</div>

関連する問題