[Laravel 6.x]Route::get()で設定したURLパラメーターの取得
Laravel6.xでRoute::get('/path/to/{id}')で設定したidの取得方法について。
HOME > WEBデザイン・制作 > WEBデザインのネタ > コンテンツの区切りを斜めにしたい
コンテンツの区切りを斜めにしたい
ランディングページでよくあるコンテンツの区切りを斜めにしたい場合、疑似要素::before、::afterを使うと便利。
HTML
- <div class="sample-1">
- <section class="section section-1">
- <p>section-1</p>
- </section>
- <section class="section section-2">
- <p>section-2</p>
- </section>
- <section class="section section-3">
- <p>section-3</p>
- </section>
- </div>
CSS
- /* 枠をオーバーしたものは非表示 */
- .sample-1 {
- overflow: hidden;
- }
- .sample-1 .section {
- background: #2aa198;
- position: relative;
- padding: 10rem 0;
- }
- .sample-1 .section p {
- text-align: center;
- font-size: 4rem;
- color: white;
- }
- .sample-1 .section-1, .sample-1 .section-3 {
- background: #6c71c4;
- }
- /* 疑似要素をblockにして回転させる */
- .sample-1 .section-2::before {
- content: "section-2 ::before";
- display: block;
- background: #2aa198;
- height: 120px;
- width: 120%;
- transform: rotate(-4deg);
- position: absolute;
- top: -60px;
- left: -10%;
- text-align: center;
- font-size: 4rem;
- color: white;
- }
- /* 疑似要素をblockにして回転させる */
- .sample-1 .section-3::before {
- content: "section-3 ::before";
- display: block;
- background: #2aa198;
- height: 120px;
- width: 120%;
- transform: rotate(-4deg);
- position: absolute;
- top: -60px;
- left: -10%;
- text-align: center;
- font-size: 4rem;
- color: white;
- }
実行結果
section-1
section-2
section-3