ボーダーを斜めにし、グラデーションしたい

リンク内容
こちらのサイトを模写しており、斜めのボーダーを作成したいのですが、うまく行きません。
クロームの検証もカンニングしているのですが、いまいちわかりませんでした。
試したこと：before、での斜めボーダーのやり方検索。
ボーダーにグラデーションプロパティはないと知り、バックグラウンドをグラデーションにして白いブロックなどで上書きするやり方。→こちらがうまくできていません。

こちらが本当のサイトでやりたいことです。

こちらが今の状態です。

回答いただけると嬉しいです。
よろしくお願いします。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <link rel="stylesheet" href="style.css">
7    <title>pokemon</title>
8</head>
9<body>
10    <header>
11        <div class="header-list">
12            <img src="img/switch_logo.jpg" class="switch">
13            <div class="header-btn">
14                <div class="header-tab">
15                    <a href="">商品・特典</a>
16                </div>
17                <div class="header-tab">
18                    <a href="">「鎧の孤島」</a>
19                </div>
20                <div class="header-tab">
21                    <a href="">「冠の雪原」</a>
22                </div>
23                <img src="img/header_logo_expansion.png">
24                <div class="header-tab">
25                    <a href="">ポケモン</a>
26                </div>
27                <div class="header-tab">
28                    <a href="">新たな要素</a>
29                </div>
30                <div class="header-tab">
31                    <a href="">最新情報</a>
32                </div>
33            </div>
34        </div>
35    </header>
36    <main>
37        <div class="top">
38            <div class="container">
39                <div class="top-left">
40                    <img src="img/vol1_character.png">
41                </div>
42                <div class="top-center">
43                    <img src="img/intro_heading_01.png">
44                    <img src="img/intro_logo.png" alt="" width="330" height="216">
45                    <p>
46                        <a href="" class="btn">
47                            <span>発売中！</span>
48                        </a>
49                    </p>
50                    <img src="img/intro_heading_03.png" alt="">
51                </div>
52                <div class="top-right">
53                    <img src="img/vol2_character.png">
54                </div>
55            </div>
56        </div>
57    </main>
58    <div class="aaa"></div>
59    
60</body>
61</html>
62
63
64
65```CSS
66コード
67```body{
68    margin: 0;
69    padding: 0;
70}
71
72header{
73    background-color: rgba(236, 243, 242, 0.932);
74    height:70px;
75    position: fixed;
76    z-index: 2;
77    width: 100%;
78}
79.header-list{
80    display: flex;
81}
82.header-btn{
83    display: flex;
84    justify-content: center;
85    margin-right: auto;
86    margin-left: auto;
87}
88.switch{
89    width: 70x;
90    height: 70px;
91}
92.header-tab{
93    position: relative;
94    width: 120px;
95    margin:0 0;
96}
97.header-tab a{
98    position: absolute;
99    top: 0;
100    left: 0;
101    width: 100%;
102    height: 100%;
103    display: block;
104    color: black;
105    font-weight: bold;
106    font-size:18px;
107    line-height: 70px;
108    text-decoration: none;
109}
110
111.top{
112    width:100%;
113    background-image:url(img/vol1_bg.jpg),
114                    url(img/vol2_bg.jpg);
115    background-position: top left , top right;
116    background-size: 50% auto, 50% auto;
117    background-repeat: no-repeat, no-repeat;
118                    /* background-repeat:no-repeat,
119					  no-repeat;
120					  repeat; */
121	/* background-position:left, */
122                        /* right; */
123    /* padding-top: 80px; */
124}
125.container{
126    margin-right: auto;
127    margin-left: auto;
128    display: flex;
129    justify-content: center;
130}
131.top-left,.top-center,.top-right{
132    margin-top:80px;
133}
134.top-center{
135    display: flex;
136    flex-direction: column;
137    align-items: center;
138    margin-top: 180px;
139}
140.top-center > img {
141    margin-bottom: 30px;
142}
143.top-center p{
144    width: 300px;
145}
146
147/* ↓ここのボタンの箇所がうまく行きません。 */
148.btn{
149    font-weight:700;
150    line-height:1.3;
151    display:flex;
152    align-items:center;
153    justify-content:center;
154    position:relative;
155    transform:skewX(-13deg)
156}
157.btn::before {
158    content: '';
159    display: block;
160    width: 110%;
161    position: absolute;
162    left: 0;
163    z-index: 2;
164    transition: all .3s;
165    background: linear-gradient(to right,#f7e259 0,#ffef97 40%,#fff 49%,#50bdbf 60%,#0aa19e 100%);
166    transform: skewX(13deg);
167    /* height: 100%; */ */
168    /* height: calc(100% + 3px) */
169}
170.btn::after {
171    content: '';
172    display: block;
173    width: 98%;
174    height: 90%;
175    background-color: #fff;
176    position: absolute;
177    top: 5%;
178    left: 1%;
179    z-index: 3;
180    transform: skewX(13deg);
181}
182.btn span{
183    display: block;
184    width: 90%;
185    position: relative;
186    z-index: 4;
187    transform: skewX(13deg);
188    text-align: center;
189    border:solid 1px black;
190}
191/* ↑ここのボタンの箇所がうまく行きません。 */
192
193.aaa{
194    height: 800px;
195}
196
197

行動規範の内容に同意します

回答2件

ちょっと雑ですがSVGで

HTML
1<svg width="300" height="100"  xmlns="http://www.w3.org/2000/svg"> 
2<defs>
3<linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="5%">
4<stop offset="0%" stop-color="#e0e000" />
5<stop offset="50%" stop-color="#ffffff" />
6<stop offset="100%" stop-color="#0000d0" />
7</linearGradient>
8</defs>
9<text x="100" y="60" font-weight="bold" font-size="30">
10発売中！
11</text>
12<text x="230" y="60" font-size="30" fill="#c0c0c0">
13&gt;
14</text>
15<polygon stroke="url(#grad)" fill-opacity="0" stroke-width="10"  points="30,5 290,5 270,95 10,95 "/>
16</svg>
17

投稿2020/06/28 03:36

編集2020/06/28 04:08

yambejp

総合スコア116724

kiyomasa

2020/06/28 05:06

ありがとうございます。 svg自体、知らなかったので、やり方勉強させていただきます。

行動規範の内容に同意します

ベストアンサー

.btn 要素に対して transform:skewX(-13deg)で斜め変形します。transformは内包するすべての要素が斜め変形しますので、「発売中！」のテキストも斜体になってしまいます。ですのでこのテキスト(span要素)に対して逆の斜め変形（transform: skewX(13deg);）をして元の形に戻します。

質問のコードだと不必要なところにtransform: skewX(13deg);をしているのでおかしくなってます。

あと、疑似要素 .btn::before .btn::afterを重ねてグラデーションのボーダー表示にしてますが、この位置とサイズの設定は、top bottom left right を使って指定すると楽だと思います。
例えば、

css
1  position: absolute;
2  top: 3px;
3  bottom: 3px;
4  left: 3px;
5  right: 3px;

と設定すれば、基準のボックスより内側に3px分小さいボックスになります。

width や height でサイズを指定しようとすると計算したりcalcを使ったりする必要がありますが、上記の方法なら直感的に指定できると思います。

上記のことを考慮すると下記のようなコードになります。

css
1.btn{
2  font-weight:700;
3  line-height:1.3;
4  display:flex;
5  align-items:center;
6  justify-content:center;
7  position:relative;
8  transform:skewX(-13deg);
9  padding: 22px 20px;
10}
11.btn::before {
12  content: '';
13  display: block;
14  position: absolute;
15  top: -3px;
16  bottom: -3px;
17  left: -3px;
18  right: -3px;
19  z-index: 2;
20  transition: all .3s;
21  background: linear-gradient(to right,#f7e259 0,#ffef97 40%,#fff 49%,#50bdbf 60%,#0aa19e 100%);
22 
23}
24.btn::after {
25  content: '';
26  display: block;
27  background-color: #fff;
28  position: absolute;
29  top: 3px;
30  bottom: 3px;
31  left: 3px;
32  right: 3px;
33  z-index: 3;
34}
35.btn span{
36  font-size: 24px;
37  display: block;
38  width: 90%;
39  z-index: 4;
40  transform: skewX(13deg);
41  text-align: center;
42}