CSSでデザインを整えたいです。

今矢印のデザインをしているのですが、なかなか思った通りになりません。

貼り付けてある画像のように、画面の両端に白の矢印と黒のバックグラウンドカラーをつけたいです。

html
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <!-- Required meta tags -->
5    <meta charset="utf-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7
8    <!--Swiper-->
9    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/css/swiper.min.css">
10    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.min.js"></script>
11
12  </head>
13  <body>
14      <!-- Slider main container -->
15      <div class="swiper-container">
16        <!-- Additional required wrapper -->
17        <div class="swiper-wrapper">
18            <!-- Slides -->
19            <div class="swiper-slide" style="linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%">
20                <img src="https://picsum.photos/id/1041/650/400" alt="">
21            </div>
22            <div class="swiper-slide">
23                <img src="https://picsum.photos/id/1042/650/400" alt="">
24            </div>
25            <div class="swiper-slide">
26                <img src="https://picsum.photos/id/1043/650/400" alt="">
27            </div>
28        </div>
29        <!-- If we need pagination -->
30        <div class="swiper-pagination"></div>
31        
32        <!-- If we need navigation buttons -->
33        <div class="swiper-button-prev swipe-sign"></div>
34        <div class="swiper-button-next swipe-sign"></div>
35    </div>
36
37    <style>
38        .swiper-button-prev{
39        position: relative;
40        display: inline-block;
41        padding: 0 0 0 16px;
42        color: #000;
43        vertical-align: middle;
44        text-decoration: none;
45        font-size: 50px;
46        }
47
48        .swiper-button-prev::before{
49        position: absolute;
50        top: 0;
51        bottom: 0;
52        left: 0;
53        margin: auto;
54        content: "";
55        vertical-align: middle;
56        box-sizing: border-box;
57        width: 50px;
58        height: 50px;
59        border: 1px solid #191919;
60        -webkit-border-radius: 25%;
61        border-radius: 25%;
62        background-color: #191919;
63        }
64
65        .swiper-button-prev::after{
66        position: absolute;
67        top: 0;
68        bottom: 0;
69        left: 0;
70        margin: auto;
71        content: "";
72        vertical-align: middle;
73        left: 5px;
74        box-sizing: border-box;
75        width: 20px;
76        height: 20px;
77        border: 3px solid transparent;
78        border-left: 50px solid #fff;
79        }
80      </style>
81
82      <script>
83            var mySwiper = new Swiper ('.swiper-container', {
84                loop: true,
85                slidesPerView: 2,
86                spaceBetween: 5,
87                centeredSlides : true,
88                pagination: '.swiper-pagination',
89                nextButton: '.swiper-button-next',
90                prevButton: '.swiper-button-prev',
91                breakpoints: {
92                    767: {
93                    slidesPerView: 1,
94                    spaceBetween: 0
95                    }
96                }
97                })
98      </script>
99
100  </body>
101</html>
102         
103

fumu7

2020/12/07 09:12

何が問題なのですか？？

Larkiwing

2020/12/07 09:29

今の状態だと矢印の色と背景が画像のようにはなっていません。貼り付けてある画像はPDFの物でコードは見えません。なので貼り付けてある画像を実装したいです。

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

回答1件

ベストアンサー

prev 側ボタンのCSSを調整しました。ご参考にしてください。

css
1   <style>
2        .swiper-button-prev{
3        position: absolute;
4        display: inline-block;
5        padding: 0 0 0 16px;
6        color: #000;
7        vertical-align: middle;
8        text-decoration: none;
9        font-size: 50px;
10        width: 48px;
11        }
12
13        .swiper-button-prev::before{
14        position: absolute;
15        top: 0;
16        bottom: 0;
17        left: 0;
18        margin: auto;
19        content: "";
20        vertical-align: middle;
21        box-sizing: border-box;
22        width: 70px;
23        height: 120px;
24        border: 1px solid #191919;
25        opacity: 0.6;
26        /* -webkit-border-radius: 25%; */
27        /* border-radius: 25%; */
28        background-color: #191919;
29        }
30
31        .swiper-button-prev::after{
32        position: absolute;
33        top: 0;
34        bottom: 0;
35        left: 0;
36        right: 0;
37        margin: auto;
38        content: "";
39        vertical-align: middle;
40        /* left: 5px; */
41        box-sizing: border-box;
42        width: 40px;
43        height: 40px;
44        border: 20px solid transparent;
45        border-left:  transparent;
46        border-right: 34px solid #fff;
47        }
48      </style>