Как добавить внутреннюю кривую с обеих сторон к построению треугольника с помощью CSS
Я создаю приложение, в котором изображение треугольника направлено вверх, а внутренняя кривая слева и справа имеет белый цвет. Я создаю его через CSS. Я построил треугольник, но не смог добавить к нему внутреннюю кривую.
Ниже мой HTML-код
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<title>template</title>
<style type = "text/css">
table{
border-collapse:collapse;
}
.triangle {
position: relative;
z-index: 3;
top: 3px;
width: 0px;
height: 0px;
border-style: solid;
border-width: 0 30px 30px 30px;
border-color: transparent transparent #FFFFFF transparent;
transform: rotate(0deg);
}
.inner-body {
padding:10px;
}
</style>
</head>
<body>
<table width = "100%">
<tr>
<td height = "100px"></td>
</tr>
<tr>
<td align = "center" valign = "top">
<table width = "100%">
<tr>
<td width = "2%"></td>
<td class = "gradient-bg">
<table width = "100%">
<tr>
<td class = "inner-body"></td>
</tr>
<tr>
<td align = "center">
<div class = "triangle"></div>
</td>
</tr>
</table>
</td>
<td width = "2%"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td align = "center" valign = "middle" height = "100px">
<!--<img src = "Images/logo.JPG" width = "90" />-->
</td>
</tr>
</table>
</body>
</html>
Как показано на изображении, белый треугольник имеет внутреннюю кривую с обеих сторон. Я хочу добавить эту кривую. Как мне это сделать?
Разница с другим вопросом
В моем вопросе мне нужно применить эффект кривой к треугольному объекту, а решение, представленное в другом вопросе, предназначено для прямоугольного объекта. Эффект применяется только к одной стороне. Как вы можете видеть изображение, которое я прикрепил, необходимо применить эффект кривой к обеим сторонам треугольника. Также у меня не было глубоких знаний о CSS, поэтому я задал вопрос на этом форуме.
На первый взгляд дубликат может показаться не связанным между собой, но техника та же самая. Ее можно решить с помощью radial-rgadient, clip-path, psudeo-elements, svg...
у вас также есть прямоугольный элемент. Ничто в вашем коде не делает его треугольным. Он просто просто вращается. Благодаря дублирующим методам вам даже не нужно его вращать.
Ответы 1
Честно говоря, я бы просто использовал клип-путь :)
.c {
background: #cc512a;
aspect-ratio: 14 / 6;
clip-path: padding-box path('M0,0 L0,60 C30,60 57,38 70,0C83,38 100,60 140,60L140,0L0,0Z');
}<div class = "c">This is some content</div>
Этот вопрос похож на: CSS прозрачная изогнутая форма с двумя закругленными сторонами. Если вы считаете, что это другое, отредактируйте вопрос, поясните, чем он отличается и/или как ответы на этот вопрос не помогают решить вашу проблему.