crear esquinas dobladas con css

futusystem · #1 (**permalink**) 14/03/2013, 13:30

quisiera hacer un menu como el que tiene esta pagina http://www.internetadn.es/ pero no se como hacer en css para poder doblarle las esquinas para que se vea sobresaliente

bNd170 · #2 (**permalink**) 14/03/2013, 14:09

Es básicamente imposible, has de crearlo a base de imagenes y posicionamiento

pzin · #3 (**permalink**) 14/03/2013, 14:54

Cita:

Iniciado por bNd170

Es básicamente imposible, has de crearlo a base de imagenes y posicionamiento

Es posible y además muy fácil. Se usa en muchos sitios.

Realmente sólo es un elemento mayor que su contenedor, que sobresale de este y con usar dos pseudo-elementos para dibujar dos triángulos usando bordes se consigue fácilmente. Luego basta con posicionarlos en el lugar apropiado.

Código CSS:

Ver originalsection {
  width: 200px;
  margin: 0 auto;
  background: #ccc;
}
 
h1 {
  position: relative;
  left: -10px;
  width: 200px;
  padding: 10px;
  background: red;
}
 
h1:before {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 0;
  height: 0;
  border-top: 10px solid black;
  border-left: 10px solid transparent;
}
 
h1:after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -10px;
  width: 0;
  height: 0;
  border-top: 10px solid black;
  border-right: 10px solid transparent;
}
 
p {
  margin: 0;
  padding: 20px
}

Para una estructura como esta:

Código HTML:

Ver original<!DOCTYPE html>
<html>
<body>
  <section>
    <h1>Ejemplo</h1>
    <p>
      Otro contenido
    </p>
  </section>
</body>
</html>