bordo storto ad un ggetto

[Dario the best]

Salve, scusate per il titolo non proprio indicativo (me ne sono reso conto solo dopo averlo pubblicato e non sono riuscito a modificarlo).

Notavo sul sito della tre (http://www.tre.it/?gclid=CMTcguj-28MCFTDKtAodBm0AfA) un grazioso effetto hover sul menù (tariffe, prodotti, internet, ecc). Sembra un background-color inclinato.

Mi chiedevo se quell'effetto fosse realizzabile solo con un background-image reso visibile all'hover, o fosse anche possibile realizzarlo tramite css con background-color o border?

[Mich_]

Che io sappia, il background si riferisce sempre ad oggetti rettangolari.
Quindi quell'effetto si puo` realizzare o con un immagine di sfondo o con un'immagine <img>.

Ritengo che in quel sito abbiano usato l'immagine di sfondo, dimensionata in base alla dimensione della cella (lista) che a sua volta dipende dalla dimensione del carattere.

[fcaldera]

si può anche usare uno pseudoelemento in position absolute e z-index negativo, colorarlo di arancione e fare una rotazione di pochi gradi sull'asse Z (magari con una transizione all'hover).

Niente immagini di sfondo e niente request aggiuntive


esempio: http://codepen.io/anon/pen/LEewLv

<a href="#">Lorem ipsum</a>

a {
  position: relative;
  text-decoration: none;
  text-transform: uppercase;
  font: 15px Tahoma;
  color: #333;
  padding: 5px 10px;
}


a:before {
  content: "";
  position: absolute;
  z-index: -1;
  opacity: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;


  -webkit-transition: .66s opacity;
  -moz-transition: .66s opacity;
  transition: .66s opacity;


  -webkit-transform: rotateZ(-1deg);
  -moz-transform: rotateZ(-1deg);
  transform: rotateZ(-1deg);
  background: orange;
}


a:hover:before {
  opacity: 1;
}