Générateur de flèches en CSS3.
Simulation : http://jsfiddle.net/frontenddeveloper/caocL8dp/8/, mixin SASS.
|
1 2 3 4 5 |
<ul> <li><a href="#">Item #1</a></li> <li><a href="#">Item #2</a></li> <li><a href="#">Lorem ispum dolor sit amet ... Lorem ispum dolor sit amet ...</a></li> </ul> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
ul, li{ margin: 0; padding: 0; list-style-type: none; } ul{ width: 260px; } /* Create CSS arrows : http://cssarrowplease.com/ */ li{ margin-bottom: 6px; background-color: grey; border-radius: 4px; } a{ position: relative; background: #88b7d5; display: block; padding: 6px 10px; margin-right: 10px; border-radius: 4px; } a:after{ left: 100%; top: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(136, 183, 213, 0); border-left-color: #88b7d5; border-width: 7px; margin-top: -7px; } a:hover{ background-color: pink; margin-left: 10px; margin-right: 4px; } a:hover:after{ border-left-color: pink; } |