He encontrado muchas opciones para tener un encabezado curvo en la red, algunas de las cuales son cóncavas.
Este es el efecto que quiero obtener, sin embargo, quiero poder mantener el encabezado en la parte superior, incluso cuando me desplazo por una lista.
Este es el codepen que encontré y ligeramente adaptado, pero no mantiene el encabezado en la parte superior:
https://codepen.io/rept/pen/XWWeBoE
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
.container {
width: 256px;
background: #2a6a8d;
font-family: Arial Narrow;
}
h1 {
text-align: center;
color: white;
}
.content {
display: block;
margin: auto;
padding: 16px;
background-color: #e7eeff;
border-top-right-radius: 30px;
border-top-left-radius: 30px;
width: 100%;
}
<div class="container">
<h1>Title</h1>
<ul class="content">
<li>- Content 1</li>
<li>- Content 2</li>
<li>- Content 3</li>
<li>- Content 4</li>
<li>- Content 5</li>
<li>- Content 6</li>
<li>- Content 7</li>
<li>- Content 8</li>
<li>- Content 9</li>
<li>- Content 10</li>
<li>- Content 11</li>
<li>- Content 12</li>
<li>- Content 13</li>
</ul>
</div>
3 respuestas
Use position:sticky
y haga la curva de manera diferente para que sea parte del título.
Aquí hay una idea usando múltiples antecedentes:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
.container {
width: 256px;
}
h1 {
text-align: center;
color: white;
position:sticky;
top:0;
background:
radial-gradient(farthest-side at bottom left, transparent 98%,#2a6a8d 100%) bottom right,
radial-gradient(farthest-side at bottom right,transparent 98%,#2a6a8d 100%) bottom left ,
#2a6a8d content-box;
background-size:30px 30px;
background-repeat:no-repeat;
padding-bottom:30px;
margin-bottom:-30px;
}
.content {
margin: auto;
padding: 16px;
background-color: #e7eeff;
}
<div class="container">
<h1>Title</h1>
<ul class="content">
<li>- Content 1</li>
<li>- Content 2</li>
<li>- Content 3</li>
<li>- Content 4</li>
<li>- Content 5</li>
<li>- Content 6</li>
<li>- Content 7</li>
<li>- Content 8</li>
<li>- Content 9</li>
<li>- Content 10</li>
<li>- Content 11</li>
<li>- Content 12</li>
<li>- Content 6</li>
<li>- Content 7</li>
<li>- Content 8</li>
<li>- Content 9</li>
<li>- Content 10</li>
<li>- Content 11</li>
<li>- Content 12</li>
<li>- Content 13</li>
<li>- Content 13</li>
</ul>
</div>
Puedes usar este código
body {
padding: 0;
margin: 0;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
.container {
width: 256px;
background: #2a6a8d;
font-family: Arial Narrow;
}
h1 {
text-align: center;
color: white;
}
.content {
display: block;
margin: auto;
padding: 16px;
background-color: #e7eeff;
border-top-right-radius: 30px;
border-top-left-radius: 30px;
width: 100%;
max-height: 300px;
overflow: scroll;
}
<div class="container">
<h1>Title</h1>
<ul class="content">
<li>- Content 1</li>
<li>- Content 2</li>
<li>- Content 3</li>
<li>- Content 4</li>
<li>- Content 5</li>
<li>- Content 6</li>
<li>- Content 7</li>
<li>- Content 8</li>
<li>- Content 9</li>
<li>- Content 10</li>
<li>- Content 11</li>
<li>- Content 12</li>
<li>- Content 13</li>
<li>- Content 14</li>
<li>- Content 15</li>
<li>- Content 16</li>
<li>- Content 17</li>
<li>- Content 18</li>
<li>- Content 19</li>
<li>- Content 20</li>
</ul>
</div>
Su contenido debe ser desplazable por dentro para lograr lo que desea.
Lo que agregué es esto
max-height: 200px;
overflow: scroll;
Debe ajustar la altura máxima a sus necesidades.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
.container {
width: 256px;
background: #2a6a8d;
font-family: Arial Narrow;
}
h1 {
text-align: center;
color: white;
}
.content {
display: block;
margin: auto;
padding: 16px;
background-color: #e7eeff;
border-top-right-radius: 30px;
border-top-left-radius: 30px;
width: 100%;
max-height: 200px;
overflow: scroll;
}
<div class="container">
<h1>Title</h1>
<ul class="content">
<li>- Content 1</li>
<li>- Content 2</li>
<li>- Content 3</li>
<li>- Content 4</li>
<li>- Content 5</li>
<li>- Content 6</li>
<li>- Content 7</li>
<li>- Content 8</li>
<li>- Content 9</li>
<li>- Content 10</li>
<li>- Content 11</li>
<li>- Content 12</li>
<li>- Content 13</li>
<li>- Content 7</li>
<li>- Content 8</li>
<li>- Content 9</li>
<li>- Content 10</li>
<li>- Content 11</li>
<li>- Content 12</li>
<li>- Content 13</li>
<li>- Content 7</li>
<li>- Content 8</li>
<li>- Content 9</li>
<li>- Content 10</li>
<li>- Content 11</li>
<li>- Content 12</li>
<li>- Content 13</li>
</ul>
</div>
Preguntas relacionadas
Nuevas preguntas
html
HTML (HyperText Markup Language) es el lenguaje de marcado para crear páginas web y otra información que se mostrará en un navegador web. Las preguntas sobre HTML deben incluir un ejemplo mínimo reproducible y una idea de lo que está tratando de lograr. Esta etiqueta rara vez se usa sola y, a menudo, se combina con [CSS] y [javascript].