CSS 疑似要素に枠線を付けたい

今、HTMLで以下の写真のような角が三角の囲いを作ってその中に文字を入れたいと考えています。

HTML
1 <p class="title" ></p>

CSS
1.title{
2  border: solid 3px #a3d6e8;
3  position: relative;
4  background: black;
5  margin-bottom: 1em;
6  text-align:center;
7  color: #fff;
8  width:82%;
9  margin:100px;
10  height:150px;
11
12}
13.title:before{
14  content: "";
15  position: absolute;
16  width: 0;
17  height: 0;
18  left: -30;
19  border-top: 80px solid transparent;
20  border-right: 30px solid black;
21  border-bottom: 70px solid transparent;
22  z-index: 1;
23}
24.title:after{
25  content: "";
26  position: absolute;
27  width: 0;
28  height: 0;
29  right: -30;
30  border-left: 30px solid black;
31  border-top: 80px solid transparent;
32  border-bottom: 70px solid transparent;
33  z-index: 1;
34}

構成としてブロック要素のpに疑似要素の三角を二つくっつけた状態ですが
冒頭の写真のように疑似要素もｐ要素と同じようなborderを付けるには
どのようにしたら良いのでしょうか。。。
ご教示いただけますと幸いです。
宜しくお願いいたします。

↓現在

Lhankor_Mhy

2021/01/19 14:25

その三角が枠線だということは、ご理解されていますか？

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

回答2件

全部背景としてスタイルをつけてみました。

サンプル

css
1:root {
2    --corner-x: 30px;
3    --corner-y1: 80px;
4    --corner-y2: 70px;
5    --border-width: 3px;
6    --deg-x-y1: 110.56deg; /* arctan(x/y) */
7    --length-grad-y1: 28.0891px; /* x*cos(deg) */
8    --deg-x-y2: 66.8deg; /* arctan(x/y) */
9    --length-grad-y2: 27.574px; /* x*cos(deg) */
10}
11.title {
12    text-align: center;
13    color: #fff;
14    margin: 100px;
15    height: 150px;
16    background-image: linear-gradient(
17            var(--deg-x-y1),
18            transparent 0 calc(var(--length-grad-y1) - 0px),
19            #a3d6e8 calc(var(--length-grad-y1) - 0px) calc(var(--length-grad-y1) + var(--border-width)),
20            black calc(var(--length-grad-y1) + var(--border-width)) 100%
21        ),
22        linear-gradient(
23            var(--deg-x-y2),
24            transparent 0 calc(var(--length-grad-y2) - 0px),
25            #a3d6e8 calc(var(--length-grad-y2) - 0px) calc(var(--length-grad-y2) + var(--border-width)),
26            black calc(var(--length-grad-y2) + var(--border-width)) 100%
27        ),
28        linear-gradient(
29            calc(var(--deg-x-y1) * -1),
30            transparent 0 calc(var(--length-grad-y1) - 0px),
31            #a3d6e8 calc(var(--length-grad-y1) - 0px) calc(var(--length-grad-y1) + var(--border-width)),
32            black calc(var(--length-grad-y1) + var(--border-width)) 100%
33        ),
34        linear-gradient(
35            calc(var(--deg-x-y2) * -1),
36            transparent 0 calc(var(--length-grad-y2) - 0px),
37            #a3d6e8 calc(var(--length-grad-y2) - 0px) calc(var(--length-grad-y2) + var(--border-width)),
38            black calc(var(--length-grad-y2) + var(--border-width)) 100%
39        ),
40        linear-gradient(
41            to left,
42            transparent 0 var(--corner-x),
43            #a3d6e8 var(--corner-x) calc(100% - var(--corner-x)),
44            transparent calc(100% - var(--corner-x)) 100%
45        ),
46        linear-gradient(
47            to left,
48            transparent 0 var(--corner-x),
49            #a3d6e8 var(--corner-x) calc(100% - var(--corner-x)),
50            transparent calc(100% - var(--corner-x)) 100%
51        ),
52        linear-gradient(
53            to left,
54            transparent 0 var(--corner-x),
55            black var(--corner-x) calc(100% - var(--corner-x)),
56            transparent calc(100% - var(--corner-x)) 100%
57        );
58    background-size: calc(var(--corner-x) + var(--border-width) - 1px) var(--corner-y1),
59        calc(var(--corner-x) + var(--border-width) - 1px) var(--corner-y2),
60        calc(var(--corner-x) + var(--border-width) - 1px) var(--corner-y1),
61        calc(var(--corner-x) + var(--border-width) - 1px) var(--corner-y2), 100% var(--border-width),
62        100% var(--border-width), 100% 100%;
63    background-repeat: no-repeat;
64    background-position: left 0, left var(--corner-y1), right 0, right var(--corner-y1), left 0, left bottom, left 0;
65}
66