Попытка сделать границу изогнутой внутри
Итак, я пытаюсь сделать границу 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.
Ответы (1 шт):
Автор решения: Alexandr_TT
→ Ссылка
Вы можете смоделировать это с помощью 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.