c01nd01r
3/20/2014 - 12:07 PM

CSS Arrow

CSS Arrow

style
content_copyfile_download
//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;
}
index
content_copyfile_download
<!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>