Skip to content

Instantly share code, notes, and snippets.

@c01nd01r

c01nd01r/index

Last active August 29, 2015 13:57
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save c01nd01r/9662336 to your computer and use it in GitHub Desktop.
Save c01nd01r/9662336 to your computer and use it in GitHub Desktop.
Download ZIP
CSS Arrow
Raw
index
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="arrow">
<p>GitHub Gist</p>
<p>Указательная стрелка</p>
</div>
</body>
</html>
Raw
style
//RU-ru
.arrow {
position:relative;
padding-left:50px; //Отступ на размер стрелки
}
.arrow:before { //Тело стрелки
content:'';
position:absolute;
top:0;
left:0;
width:30px;
height:40px;
background: #ffeaa8;
background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAANNJREFUeNpi%2FP%2F%2FPwMxwGiHtQKQuo8kdICJgXhQj8ZPZCLB1gQkoQnnPI4%2BINbm%2BUjsD0DcCGIwEWGrA5ByQBKaCLQVZAADC1BSAEgbIEk%2BADkJh19Bcg0wDszm9UC8H4ahBmKztRDZVUxQJyQiiSkg%2BbEfOWqAajcga2aExTPQFpDtAUhyG9D4hkDNF1BsRo43aEjCALLGBegaUTRjcT5y1BRiiwmUqIL6aQOaGnjU4NWMxfmgKJuAKw1gaEZzfiMuW8EAFNrYsOF2qwJccjAMEGAAmDJ3Q4bLkscAAAAASUVORK5CYII%3D');
background-repeat:no-repeat;
background-position:10px center;
}
.arrow:after { //Указатель
content:'';
position:absolute;
top:0;
left:30px;
width:0px;
height:0px;
border:20px solid transparent; //Высота указателя. Можно использовать border-top & bottom.
border-left:10px solid transparent;//Ширина указателя.
border-left-color: #ffeaa8;//Цвет указателя
}
p {
margin:0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment