En este Tutoriales En Linea les traemos este truco de efecto que permite una forma en esquinas recortadas - cutout corners en CSS3...
Background:gradient, clip-path
<style>
main{
width: 100%;
padding: 60px 0;
}
.bevel-corners{
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
margin-bottom: 20px;
}
.bevel-corners > div{
width: 249px;
color: #FFF;
padding: 1.2em 1.8em;
hyphens: auto;
text-align: justify;
background: #b4a078;
}
.bevel-corners > p{
width: 116px;;
}
.bevel-corners:nth-of-type(1) > div{
background: linear-gradient(45deg, transparent 12px, #b4a078 13px) bottom left,
linear-gradient(135deg, transparent 12px, #b4a078 13px) top left,
linear-gradient(-135deg, transparent 12px, #b4a078 13px) top right,
linear-gradient(-45deg, transparent 12px, #b4a078 13px) bottom right;
background-size: 51% 51%;
background-repeat: no-repeat;
}
.bevel-corners:nth-of-type(2) > div{
background: radial-gradient(circle at bottom left, transparent 15px, #b4a078 16px) bottom left,
radial-gradient(circle at top left, transparent 15px, #b4a078 16px) top left,
radial-gradient(circle at top right, transparent 15px, #b4a078 16px) top right,
radial-gradient(circle at bottom right, transparent 15px, #b4a078 16px) bottom right;
background-size: 51% 51%;
background-repeat: no-repeat;
}
.bevel-corners:nth-of-type(3) > div{
padding: 0 9px;
border: 18px solid transparent;
border-image: 1 url('dаta:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="3" height="3" fill="%23b4a078"><polygon points="0,1 1,0 2,0 3,1 3,2 2,3 1,3 0,2"/> </svg>');
background-clip: padding-box;
}
.bevel-corners:nth-of-type(4) > div{
clip-path: polygon(20px 0, calc(100% - 20px) 0, 100% 20px, 100% calc(100% - 20px), calc(100% - 20px) 100%, 20px 100%, 0 calc(100% - 20px), 0 20px);
transition: 1s clip-path;
}
.bevel-corners:nth-of-type(4):hover > div{
clip-path: polygon(0 0, 0 0, 100% 0, 100% 0, 100% 100%, 100% 100%, 0 100%, 0 100%);
}
</style>
<main>
<div class="bevel-corners">
<p>① linear-gradient</p>
<div>Tutoriales En Linea es un portal web de tutoriales, cursos, manuales, trucos, tips, novedades, video tutoriales, formas de ganar dinero online, entretenimiento y demás. También es un sistemas instructivos de autoaprendizaje que pretenden simular al maestro y muestran al usuario el desarrollo de algún procedimiento o los pasos para realizar determinada actividad..</div>
</div>
<div class="bevel-corners">
<p>② radial-gradient</p>
<div>Tutoriales En Linea es un portal web de tutoriales, cursos, manuales, trucos, tips, novedades, video tutoriales, formas de ganar dinero online, entretenimiento y demás. También es un sistemas instructivos de autoaprendizaje que pretenden simular al maestro y muestran al usuario el desarrollo de algún procedimiento o los pasos para realizar determinada actividad..</div>
</div>
<div class="bevel-corners">
<p>③ Inline SVG</p>
<div>Tutoriales En Linea es un portal web de tutoriales, cursos, manuales, trucos, tips, novedades, video tutoriales, formas de ganar dinero online, entretenimiento y demás. También es un sistemas instructivos de autoaprendizaje que pretenden simular al maestro y muestran al usuario el desarrollo de algún procedimiento o los pasos para realizar determinada actividad..</div>
</div>
<div class="bevel-corners">
<p>④ clip-path</p>
<div>Tutoriales En Linea es un portal web de tutoriales, cursos, manuales, trucos, tips, novedades, video tutoriales, formas de ganar dinero online, entretenimiento y demás. También es un sistemas instructivos de autoaprendizaje que pretenden simular al maestro y muestran al usuario el desarrollo de algún procedimiento o los pasos para realizar determinada actividad..</div>
</div>
</main>
Ver resultado
Comentarios