俺、サービス売って家買うんだ

Swift, Kotlin, Vue.js, 統計, GCP / このペースで作ってればいつか2-3億で売れるのがポっと出来るんじゃなかろうか

可変の五角形を使って横幅可変の花屋の屋根っぽいCSSを構築するよ

css

f:id:ie-kau:20190711095410p:plain

要件

花屋の軒に垂れてるピラピラしたやつっぽいデザイン
スマホ・PCで表示崩れを起こさないようにレスポンシブデザインで
CSSだけで

成果物

iPhone X size
f:id:ie-kau:20190711093843p:plain

PC size
f:id:ie-kau:20190711093633p:plain

ソースコード

z-index周りとか適当だけど、製品にしたときはちゃんと書くぞ！

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>花屋</title>
   <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css">
<style>

header {
    width: calc(100%-20px);
    border-bottom: 80px solid #ffbcff;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    height: 0;
    position: relative;
    z-index: 4;
}

nav {
  width: 100%;
  position: relative;
  z-index: 3;
  display: flex;
}

nav > a {
    position: relative;
    height: 65px;
    flex: 1;
    color: #FFF;
    text-align: center;
    font-weight: bold;
    display: block;
}
    
nav > a:after {
    content: '';
    position: absolute;
    top: 65px;
    left: 0;
    background-color: inherit;
    padding-bottom: 50%;
    width: 57.7%;
    z-index: -1;
    transform-origin: 0 0;
    transform: rotate(-30deg) skewX(30deg);
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
}

nav a:nth-child(odd) {
    background-color: #FC5C65;
}

nav a:nth-child(even) {
    background-color: #ffc7ca;
}

div {
    width: 96%;
    height: 500px;
    margin: 0 auto;
    background-color: #feede3
}

</style>

</head>
<body>

   <header>
   </header>
   
   <nav>
        <a href="#">
        </a>
        <a href="#">
        </a>
        <a href="#">
        </a>
        <a href="#">
        </a>
        <a href="#">
        </a>
    </nav>

    <div>
    </div>

</body>
</html>