"テンプレート01"のトップでいろいろ遊んだ産物です。ご自由にどうぞ。角度をカーブを変えたい時は"8 POINT FULL CONTROL "がとても便利です。
画像はSILHOUETTE DESIGNからお借りしています。ここから持ち出さないでください。

さよなら、
透明だった僕たち

ノクチルユニットカラー

HTML

CSS

Trust me now

クラファユニットカラー

HTML

CSS

金魚掬い

中に画像を入れる

HTML

CSS

.wrap{
    position: relative;
    text-align:center;
    width: 100%;
    height: 210px;
}

.a1{
    width: 200px;
    height: 175px;
    border: 1px solid #fff;
    background-color: transparent;
    border-radius: 45% 26% 26% 58% / 58% 30% 46% 28% ;
    margin: 0 auto;
    position: relative;
}

.a2{
    width: 200px;
    height: 175px;
    border: 1px solid #fff;
    background-color: transparent;
    border-radius: 58% 30% 46% 28% / 45% 60% 26% 58%   ;
    margin: -175px auto;
    position: relative;
    margin-bottom: 100px;
    background:transparent url(画像URL)  no-repeat;
    background-size: 50px;
    background-position: top 15% right 15%;
}

h1{
    color: #fff;
    position: absolute;
    bottom: 30px;
    left: 49%;
    font-size: 24px;
    text-transform: uppercase;
    letter-spacing: 10px;
    white-space: nowrap;
    transform: translate(-40%, 0)　rotate(-10deg);
    -webkit-transform: translate(-30%, 0) rotate(-10deg);
    -ms-transform: translate(-40%, 0)　rotate(-10deg);
    margin: 5px auto;
}

金魚掬い

画像の上に文字乗せる

HTML

CSS

さよなら、透明だった僕たち

Trust me now

金魚掬い

さよなら、
透明だった僕たち