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

質問編集履歴

1

情報の追加

2021/02/09 09:36

投稿

cafe1111
cafe1111

スコア62

title CHANGED
File without changes
body CHANGED
@@ -9,45 +9,45 @@
9
9
  <div>aaaaa</div>
10
10
 
11
11
  ```
12
- ```scss
12
+ ```css
13
- div{
13
+ div {
14
- display: inline-block;
15
- position: relative;
14
+ position: relative;
15
+ font-family: Arial;
16
+ font-size: 20px;
17
+ line-height: 120px;
18
+ text-align: center;
19
+ width: 250px;
16
- margin: 20px;
20
+ height: 120px;
17
- padding: 20px;
18
- background: #fff;
19
- border: 1px solid #666;
20
- border-radius: 20px;
21
+ border-radius: 10px;
21
- &::before {
22
- content: "";
23
- position: absolute;
24
- bottom: -30px;
22
+ padding: 0px;
25
- left: 40px;
26
- transform-origin: left top;
27
- transform: skewX(-40deg);
23
+ border: #000 solid 4px;
24
+ }
28
25
 
26
+ div::before {
27
+ content: "";
28
+ position: absolute;
29
- width: 0;
29
+ width: 0;
30
- height: 0;
30
+ z-index: 0;
31
- border-top: 30px solid #666;
31
+ border-style: solid;
32
- border-left: 12px solid transparent;
32
+ border-width: 0 44px 24px 0;
33
- border-right: 12px solid transparent;
33
+ border-color: transparent #000 transparent transparent;
34
- transform-origin: left top;
35
- transform: skewX(-40deg);
36
- }
37
- &::after {
38
- content: "";
39
- position: absolute;
40
- bottom: -26px;
34
+ top: 25%;
41
- left: 43px;
35
+ left: -48px;
42
- transform-origin: left top;
43
- transform: skewX(-40deg);
44
- width: 0;
45
- height: 0;
46
- border-top: 30px solid #fff;
36
+ margin-top: -14px;
47
- border-left: 12px solid transparent;
48
- border-right: 12px solid transparent;
49
- transform-origin: left top;
50
- transform: skewX(-40deg);
37
+ display: block;
51
- }
52
38
  }
39
+
40
+ div::after {
41
+ content: "";
42
+ position: absolute;
43
+ display: block;
44
+ width: 0;
45
+ z-index: 1;
46
+ border-style: solid;
47
+ border-width: 0 40px 20px 0;
48
+ border-color: transparent #000000 transparent transparent;
49
+ top: 25%;
50
+ left: -40px;
51
+ margin-top: -10px;
52
+ }
53
53
  ```