Me solicitaron crear una página web muy sencilla, plana. Es sólo para presentar una vez. Me pidieron que si el menú podría tener un estilo que no sé cómo realizarlo: Quieren que los bordes izquierdo y derecho parezca una flecha.
Así me lo están solicitando:
Como pueden ver, tiene “flechas” en los costados.
Así estoy trabajando el menú en este momento:
* { color: #FFFFFF; padding: 0; margin: 0; } body { background-color: #000000; font-family: "Futura Condensed BQ"; color: #FFFFFF; } #manual { position: absolute; right: 5%; max-width: 60px; } .franja_verde { background-color: #ADEF1D; } .franja_negra { background-color: #000000; } #primera_franja { min-width: 100%; max-width: 100%; min-height: 100px; max-height: 100px; } #segunda_franja { min-width: 100%; max-width: 100%; min-height: 60px; max-height: 60px; } #pie { position: relative; bottom: 0; color: #FFFFFF; min-width: 100%; max-width: 100%; background-color: #ADEF1D; text-align: center; } .caja_aventura { position: relative; left: 25%; max-width: 250px; font-family: "BlowBrush"; transform: rotateX(-30deg) rotateY(30deg); background-color: #000000; } .bloque_pregunta { padding: .5; background-color: #ADEF1D; max-width: 480px; text-align: center; margin: auto; text-transform: uppercase; color: #FFFFFF; font-family: "Chalkboard SE"; transform: rotateX(-16deg) rotateY(16deg); } .bloque_respuesta p { padding: .5; max-width: 480px; text-align: center; margin: auto; font-family: "Futura-Bold"; } .menu_informacion { position: absolute; top: 0%; min-width: 60%; max-width: 60%; min-height: 150px; left: 21%; padding-left: 2em; padding-right: 2em; background-color: #000000; } .hojas { max-width: 30%; } .enlaces { color: #FFFFFF; font-family: "BlowBrush"; border-bottom: 3px solid #ADEF1D; } .enlaces:hover { color: #ADEF1D; text-decoration: none; } .enlaces.activo { color: #ADEF1D; } .logo_menu { max-width: 15%; } .contenedor_enlaces { position: absolute; right: 8%; bottom: 5%; } *::selection { background-color: transparent; } .iconos_varios { max-width: 5%; } .numero_contacto { position: absolute; top: 5%; left: 30%; color: #FFFFFF; } .correo_contacto { position: absolute; top: 5%; left: 50%; } .redes_sociales { position: absolute; top: 50%; left: 30%; z-index: 300; } .imagenes { max-height: 530px; } .video_principal { position: relative; left: 20%; min-width: 60%; } .titulo_actividad { padding: .5; background-color: #ADEF1D; max-width: 180px; text-align: center; text-transform: uppercase; color: #FFFFFF; font-family: "Chalkboard SE"; transform: rotateX(-16deg) rotateY(16deg); } .titulo_actividad, .imagen_actividad { margin: auto; } .imagenes_actividades { max-width: 100%; } .nombre_actividad { padding: 1em; font-size: 25pt; margin: auto; background-color: #000000; max-width: 220px; text-align: center; text-transform: uppercase; color: #ADEF1D; font-family: "BlowBrush"; transform: rotateX(-30deg) rotateY(30deg); } .texto_actividad { width: 80%; text-align: center; margin: auto; font-size: 20pt; } #informacion_nosotros { font-size: 20pt; text-align: center; padding: 2em; background-color: #7E7E7E; } .titular { font-size: 25pt; font-family: "BlowBrush"; } .info_contac { margin: auto; max-width: 50px; font-size: 20pt; }<!--Incio franjas.--> <header> <!--Primera franja.--> <div class="franja_verde" id="primera_franja"></div> <!--Fin primera franja.--> <!--Primera franja.--> <div class="franja_negra" id="segunda_franja"> <!--Llamada ícono de PDF.--> <a href="./manual/manual_usuario.pdf" download="Manual de usuario.pdf"><img src="../imagenes/Ayuda_Manual_PDF.png" alt="Descargar manual." id="manual" class="iconos_varios"></a> <!--Fin ícono PDF.--> </div> <!--Fin primera franja.--> <!--Inicio navegación.--> <nav class="menu_informacion"> <img src="../imagenes/logo.png" alt="" class="logo_menu"> <!--Inicio sección de celular.--> <div class="numero_contacto"> <img src="../imagenes/CONTACTOS.png" alt="Contacto." class="iconos_varios"> 300 000 000 </div> <!--Fin sección de celular.--> <!--Inicio sección de correo.--> <div class="correo_contacto"> <img src="../imagenes/CORREO.png" alt="Contacto." class="iconos_varios"> <a href="mailto:info@ecotour.com">info@ecotour.com</a> </div> <!--Fin sección de correo.--> <!--Inicio redes.--> <div class="redes_sociales"> <img src="../imagenes/FACEBOOK.png" class="iconos_varios"> <img src="../imagenes/INSTAGRAM.png" class="iconos_varios"> <img src="../imagenes/YOUTUBE.png" class="iconos_varios"> </div> <!--Fin redes.--> <!--Enlaces de la página.--> <div class="contenedor_enlaces"> <a href="../" class="enlaces">INICIO</a> <a href="../actividades/" class="enlaces">ACTIVIDADES</a> <a href="" class="enlaces activo">NOSOTROS</a> <a href="../contacto/" class="enlaces">CONTACTO</a> </div> <!--Fin enlaces.--> </nav> <!--Fin navegación.--> </header> <!--Final franjas.-->Estoy trabajándolo como si fuera un simple rectángulo. No sé muy bien cómo generar ese estilo. Tengo idea de que es posible con :before y/o :after, pero no manejo a la perfección CSS3. Por favor, agradecería muchísimo si alguien pudiera ayudarme.
