The skewed background or you can say an angel color shade background can be created by using HTML and CSS. This background can be used as a cover pic of your website that will be attractive. In this article, we will create a simple skewed background. We will divide the article into two sections in the first section we will create the structure and in the second section, we decorate the structure.
Crear estructura: En esta sección, crearemos la estructura utilizando solo códigos HTML simples.
- Código HTML: al usar la etiqueta HTML <section> , crearemos la sección para nuestro fondo sesgado que tendrá una etiqueta HTML <div> dentro.
<!DOCTYPE html><html><head><meta><title>Skewed Background using HTML and CSS</title></head><body><section><divclass="content"><h2>GeeksforGeeks</h2></div></section></body></html>
Estructura de diseño: En esta sección decoraremos la estructura pre-creada con la ayuda de CSS.
- Código CSS: en esta sección, primero usaremos algunas propiedades de CSS para diseñar el fondo y luego usaremos la propiedad de sesgo del CSS que sesga un elemento a lo largo de los ejes x e y en los ángulos dados.
<style>body {margin:0;padding:0;font-family:serif;}section:hover {background: linear-gradient(green, yellow);}section {display: flex;background:green;height:350px;justify-content:center;align-items:center;transform: skew(0deg,-10deg) translateY(-120px);}.content {margin:0;padding:0;position:relative;max-width:900px;transform: skew(0deg,10deg);text-align:center;}.content h2{color:#fff;font-size:80px;}</style>
Código final: es la combinación de las dos secciones de código anteriores al combinar las dos secciones anteriores podemos lograr el fondo sesgado.
- Programa:
<!DOCTYPE html><html><head><meta><title>Skewed Background using HTML and CSS</title></head><style>body {margin: 0;padding: 0;font-family: serif;}section:hover {background-image: linear-gradient(to left, green , yellow);transition-time: 5s;}section {display: flex;background: green;height: 350px;justify-content: center;align-items: center;transform: skew(0deg, -10deg) translateY(-120px);}.content {margin: 0;padding: 0;position: relative;max-width: 900px;transform: skew(0deg, 10deg);text-align: center;}.content h2 {color: #fff;font-size: 80px;}</style><body><section><divclass="content"><h2>GeeksforGeeks</h2></div></section></body></html> - Producción:
Publicación traducida automáticamente
Artículo escrito por lakshgoel204 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA