teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

2

コード追記

2020/10/08 07:36

投稿

hatena19
hatena19

スコア34367

answer CHANGED
@@ -42,4 +42,38 @@
42
42
  position: relative;
43
43
  z-index: 1;
44
44
  }
45
+ ```
46
+
47
+ ---
48
+
49
+ 疑似要素に左右ボーダーを表示させた方かシンプルかな。
50
+
51
+ ```css
52
+ .wrapper {
53
+ text-align: center;
54
+ width: 200px;
55
+ height: 150px;
56
+ border: 1px solid #aaa;
57
+ position: relative;
58
+ }
59
+
60
+ .wrapper::before,
61
+ .wrapper::after {
62
+ position: absolute;
63
+ content: "";
64
+ display: block;
65
+ right: 0;
66
+ left: 0;
67
+ height: 10px;
68
+ border-left: 10px solid #aaa;
69
+ border-right: 10px solid #aaa;
70
+ }
71
+
72
+ .wrapper::before {
73
+ top: 0;
74
+ }
75
+
76
+ .wrapper::after {
77
+ bottom: 0;
78
+ }
45
79
  ```

1

コード微修正

2020/10/08 07:36

投稿

hatena19
hatena19

スコア34367

answer CHANGED
@@ -13,7 +13,6 @@
13
13
  width: 200px;
14
14
  height: 150px;
15
15
  position: relative;
16
- border: solid 1px gray;
17
16
  background-color: gray;
18
17
  }
19
18