3

Итак, я пытаюсь сделать границу asp: Table изогнутой внутрь (как border-radius, но внутрь). Картинка того, что я пытаюсь получить:

введите сюда описание изображения

Я не могу поместить контент в div и изогнуть его углы, потому что это не позволит мне сохранить внешний вид моего сайта. Я пытаюсь сделать на этой странице, так, чтобы границы таблицы были того же цвета, что и фон. Это мой код в настоящее время:

html,body, #main_div{
           height: 100%;
        }
        body {
          background-color: #1862A1;
          background-image: linear-gradient(90deg, #1862A1, #8529B1);
          padding-bottom: 0;
          padding-top: 0;
          margin: 0;
        }
        .main_table{
            height: 100%;
            width: 80%;
            background-color: transparent;
            min-height: 61vh;
        }
        .album{
            width: 8vw;
            height: 8vw;
        }
        .inside{
            background-color: white;
            width: 25vh;
            height: 27vh;
            border-radius: 20px;
        }
        .border{
            border: 3px solid white;
        }
        #continuation{
            min-height: 39vh;
            background-color: white;
            width: 80%;
        }
<body>
        <form id="form1" runat="server">
            <center>
                <table id="Table1" runat="server" CellPadding="0" GridLines="Both" HorizontalAlign="Center" class="main_table">
                <tr class="border">
                    <td class="border">
                        <center>
                            <table class="inside">
                              <tr>
                                <td><center><asp:Image src="../pics/ADHD.jpeg" ID="Image1" runat="server" CssClass="album"></asp:Image></center></td>
                              </tr>
                              <tr>
                                <td><center><asp:Button ID="Button1" runat="server" Text="Button" CssClass="album_button"></asp:Button></center></td>
                              </tr>
                            </table>
                            </center>
                    </td>
                    <td class="border">
                        <center>
                        <table class="inside">
                              <tr>
                                <td><center><asp:Image src="../pics/all-eyez-on-me.png" ID="Image2" runat="server" CssClass="album"></asp:Image></center></td>
                              </tr>
                              <tr>
                                <td><center><asp:Button ID="Button2" runat="server" Text="Button" CssClass="album_button"></asp:Button></center></td>
                              </tr>
                            </table>
                            </center>
                    </td>
                    <td class="border">
                        <center>
                        <table class="inside">
                              <tr>
                                <td><center><asp:Image src="../pics/DAMN.jpg" ID="Image3" runat="server" CssClass="album"></asp:Image></center></td>
                              </tr>
                              <tr>
                                <td><center><asp:Button ID="Button3" runat="server" Text="Button" CssClass="album_button"></asp:Button></center></td>
                              </tr>
                            </table>
                            </center>
                    </td>
                    <td class="border">
                        <center>
                        <table class="inside">
                              <tr>
                                <td><center><asp:Image src="../pics/detroit-2.jpg" ID="Image4" runat="server" CssClass="album"></asp:Image></center></td>
                              </tr>
                              <tr>
                                <td><center><asp:Button ID="Button4" runat="server" Text="Button" CssClass="album_button"></asp:Button></center></td>
                              </tr>
                            </table>
                            </center>
                    </td>
                    <td class="border">
                        <center>
                        <table class="inside">
                              <tr>
                                <td><center><asp:Image src="../pics/ISSA.jpg" ID="Image5" runat="server" CssClass="album"></asp:Image></center></td>
                              </tr>
                              <tr>
                                <td><center><asp:Button ID="Button5" runat="server" Text="Button" CssClass="album_button"></asp:Button></center></td>
                              </tr>
                            </table>
                            </center>
                    </td>
                </tr>
                <tr class="border">
                    <td class="border">
                        <center>
                        <table class="inside">
                              <tr>
                                <td><center><asp:Image src="../pics/forst-hills-drive.jpg" ID="Image6" runat="server" CssClass="album"></asp:Image></center></td>
                              </tr>
                              <tr>
                                <td><center><asp:Button ID="Button6" runat="server" Text="Button" CssClass="album_button"></asp:Button></center></td>
                              </tr>
                            </table>
                            </center>
                    </td>
                    <td class="border">
                        <center>
                        <table class="inside">
                              <tr>
                                <td><center><asp:Image src="../pics/hollywoods-bleading.jpg" ID="Image7" runat="server" CssClass="album"></asp:Image></center></td>
                              </tr>
                              <tr>
                                <td><center><asp:Button ID="Button7" runat="server" Text="Button" CssClass="album_button"></asp:Button></center></td>
                              </tr>
                            </table>
                            </center>
                    </td>
                    <td class="border">
                        <center>
                        <table class="inside">
                              <tr>
                                <td><center><asp:Image src="../pics/kirk.jpg" ID="Image8" runat="server" CssClass="album"></asp:Image></center></td>
                              </tr>
                              <tr>
                                <td><center><asp:Button ID="Button8" runat="server" Text="Button" CssClass="album_button"></asp:Button></center></td>
                              </tr>
                            </table>
                            </center>
                    </td>
                    <td class="border">
                        <center>
                        <table class="inside">
                              <tr>
                                <td><center><asp:Image src="../pics/TA13OO.jpg" ID="Image9" runat="server" CssClass="album"></asp:Image></center></td>
                              </tr>
                              <tr>
                                <td><center><asp:Button ID="Button9" runat="server" Text="Button" CssClass="album_button"></asp:Button></center></td>
                              </tr>
                            </table>
                            </center>
                    </td>
                    <td class="border">
                        <center>
                        <table class="inside">
                              <tr>
                                <td><center><asp:Image src="../pics/without-warning.jpg" ID="Image10" runat="server" CssClass="album"></asp:Image></center></td>
                              </tr>
                              <tr>
                                <td><center><asp:Button ID="Button10" runat="server" Text="Button" CssClass="album_button"></asp:Button></center></td>
                              </tr>
                            </table>
                            </center>
                    </td>
                </tr>
            </table>
                <div id="continuation">
                </div>
        </center>
        </form>
    </body>

В сниппете я заменил тег asp: Table на table, тег asp: TableRow на tr и тег asp: TableCell на td.

В настоящее время код производит это:

введите сюда описание изображения

Чтобы создать иллюзию, что граница вокруг таблиц похожа на вырез в div, мне придется сделать границу в классе .border, как на картинке, или использовать другой метод - у кого-нибудь есть идеи?

Свободный перевод вопроса https://stackoverflow.com/q/66415116/7394871 от участника @kfir ezer.

2

1 ответ 1

3

Вы можете смоделировать это с помощью radial-gradient()

.box {
  width:200px;
  height:200px;
  border:5px solid #fff;
  background:
    radial-gradient(farthest-side at top left    ,transparent 97%,#fff) bottom right,
    radial-gradient(farthest-side at top right   ,transparent 97%,#fff) bottom left,
    radial-gradient(farthest-side at bottom left ,transparent 97%,#fff) top right,
    radial-gradient(farthest-side at bottom right,transparent 97%,#fff) top left;
  background-size:30px 30px; /* adjust this */
  background-repeat:no-repeat;
}

body {
  background:linear-gradient(to right,red,blue)
}
<div class="box"></div>

Другая идея использовать border-image:

.box {
  width: 200px;
  height: 200px;
  margin: 5px;
  border: 1px solid transparent;
  box-shadow: 0 0 0 5px #fff;
  border-image: radial-gradient(farthest-side, transparent 97%, #fff) 100;
  border-image-width: 40px; /* adjust this */
}

body {
  background: linear-gradient(to right, red, blue)
}
<div class="box"></div>

Свободный перевод ответа от участника @Temani Afif.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.