回答編集履歴

2

コード追記

2020/10/08 07:36

投稿

hatena19
hatena19

スコア34075

test CHANGED
@@ -87,3 +87,71 @@
87
87
  }
88
88
 
89
89
  ```
90
+
91
+
92
+
93
+ ---
94
+
95
+
96
+
97
+ 疑似要素に左右ボーダーを表示させた方かシンプルかな。
98
+
99
+
100
+
101
+ ```css
102
+
103
+ .wrapper {
104
+
105
+ text-align: center;
106
+
107
+ width: 200px;
108
+
109
+ height: 150px;
110
+
111
+ border: 1px solid #aaa;
112
+
113
+ position: relative;
114
+
115
+ }
116
+
117
+
118
+
119
+ .wrapper::before,
120
+
121
+ .wrapper::after {
122
+
123
+ position: absolute;
124
+
125
+ content: "";
126
+
127
+ display: block;
128
+
129
+ right: 0;
130
+
131
+ left: 0;
132
+
133
+ height: 10px;
134
+
135
+ border-left: 10px solid #aaa;
136
+
137
+ border-right: 10px solid #aaa;
138
+
139
+ }
140
+
141
+
142
+
143
+ .wrapper::before {
144
+
145
+ top: 0;
146
+
147
+ }
148
+
149
+
150
+
151
+ .wrapper::after {
152
+
153
+ bottom: 0;
154
+
155
+ }
156
+
157
+ ```

1

コード微修正

2020/10/08 07:36

投稿

hatena19
hatena19

スコア34075

test CHANGED
@@ -27,8 +27,6 @@
27
27
  height: 150px;
28
28
 
29
29
  position: relative;
30
-
31
- border: solid 1px gray;
32
30
 
33
31
  background-color: gray;
34
32