ボタンの4つ角にカッコを付けたい

前提・実現したいこと

添付画像のような４つ角にカッコを付けたデザインのボタンを作りたい

発生している問題・エラーメッセージ

左上と右下にカッコを付けるデザインのサンプルを見つけたので
応用して作成することは出来たのですが
もっと簡潔に書くことは出来ないかと思い質問しました。
参考サイト様　（19. カギカッコ）
https://saruwakakun.com/html-css/reference/box

該当のソースコード

ソースコード
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .button {
      display: flex;
      flex-wrap: wrap;
      position: relative;
      margin: 100px;
      padding: 25px;
      width: 200px;
      background-color: skyblue;

      box-sizing: border-box;
    }

    .button::before,
    .button::after {
      position: absolute;
      content: '';
      width: 20px;
      height: 20px;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
    }
    .txt::before,
    .txt::after {
      position: absolute;
      content: '';
      width: 20px;
      height: 20px;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
    }

    .button::before {
        top: 0;
        left: 0;
        border-top: 3px solid #555;
        border-left: 3px solid #555;
    }
    .txt::before {
      top: 0;
      right: 0;
      border-top: 3px solid #555;
      border-right: 3px solid #555;
    }

    .button::after {
        bottom: 0;
        left: 0;
        border-bottom: 3px solid #555;
        border-left: 3px solid #555;
    }
    .txt::after {
        bottom: 0;
        right: 0;
        border-bottom: 3px solid #555;
        border-right: 3px solid #555;
    }

    .txt {
      width: 100%;
      text-align: center;
    }
    a {
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 999;
    }
  </style>
</head>
<body>
  <div class="button">
    <div class="txt">button</div>
    <a href=""></a>
  </div>
</body>
</html>

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

回答3件

単純に簡潔にすることを考えれば、要素や擬似要素は使わずに background プロパティを使用し、以下のように行えると思います (動作確認用リンク)。質問文の CSS を minify したコードのサイズが 846 バイト、以下に記載している CSS を minify したコードのサイズが 511 バイトとなっています。

CSS
1.button {
2  --w: calc(100% - 20px);
3  --g: #555 20px, transparent 20px var(--w), #555 var(--w);
4  box-sizing: border-box;
5  display: flex;
6  position: relative;
7  flex-wrap: wrap;
8  width: 200px;
9  margin: 100px;
10  padding: 25px;
11  background: linear-gradient(90deg, var(--g)) 0 0/100% 3px,
12    linear-gradient(90deg, var(--g)) 0 100%/100% 3px,
13    linear-gradient(0, var(--g)) 0 0/3px 100%,
14    linear-gradient(0, var(--g)) 100% 0/3px 100% #87ceeb;
15  background-repeat: no-repeat;
16}
17
18.txt {
19  width: 100%;
20  text-align: center;
21}
22
23a {
24  z-index: 999;
25  position: absolute;
26  top: 0;
27  right: 0;
28  bottom: 0;
29  left: 0;
30}

投稿2019/10/28 22:01

編集2019/10/28 23:53

s8_chu

総合スコア14731

s8_chu

2019/10/28 22:30 編集

もう少し長くなりますが、 3 つの擬似要素を用意し、それらを重ねることでも質問者さんの実現したいことが行えます ( https://jsfiddle.net/1ev9ya2z/ )。

kyoya0819

2019/10/28 23:33

> 質問文の CSS を minify したコードのサイズが 846 バイト、質問文の CSS を編集し minify したコードのサイズが 511 バイトとなっています。入力ミスでは？

s8_chu

2019/10/28 23:55

asuchi0819 さん> ご指摘いただきありがとうございます。確かに分かりづらくなっていたため、回答文の修正を行いました。

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

ベストアンサー

border-image, clip-path でも似たような表示にできますが、今回は box-shadow を使ってみます。
https://developer.mozilla.org/ja/docs/Web/CSS/box-shadow
https://developer.mozilla.org/ja/docs/Web/CSS/border-image
https://developer.mozilla.org/ja/docs/Web/CSS/clip-path

CSS
1.button {
2  padding: 25px;
3  background: skyblue;
4  box-shadow: 
5    23px 0px 0px -20px skyblue,
6    0px 23px 0px -20px skyblue,
7    0px -23px 0px -20px skyblue,
8    -23px 0px 0px -20px skyblue,
9    0 0 0 3px #555;
10}

投稿2019/10/29 09:03

x_x

総合スコア13749

素晴らしく便利なサルワカさんのサイトから19番のコードを少し改変しました。
思いつきで書いたのでもっと良い書き方あるかもです。
提示のような外観にしたい場合は.boxに背景色を指定してください。

HTML
1
2<div class="box19">
3    <div class=lb></div>
4    <p>ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章</p>
5    <div class=rt></div>
6</div>
7

CSS
1.box19 {
2    position: relative;
3    padding:0.25em 1em;
4}
5.box19:before,.box19:after,.lb,.rt{ 
6    content:'';
7    width: 20px;
8    height: 30px;
9    position: absolute;
10    display: inline-block;
11}
12.box19:before{
13    border-left: solid 1px #5767bf;
14    border-top: solid 1px #5767bf;
15    top:0;
16    left: 0;
17}
18.lb{
19    border-left: solid 1px #5767bf;
20    border-bottom: solid 1px #5767bf;
21    bottom:0;
22    left: 0;
23}
24.box19:after{
25    border-right: solid 1px #5767bf;
26    border-bottom: solid 1px #5767bf;
27    bottom:0;
28    right: 0;
29}
30.rt {
31    border-right: solid 1px #5767bf;
32    border-top: solid 1px #5767bf;
33    top:0;
34    right: 0;
35}
36.box19 p {
37    margin: 0; 
38    padding: 0;
39}