CSS Arrow

CSS-Arrow.markdown

CSS Arrow

inspired by CSS ARROW PLEASE!

thanks http://cssarrowplease.com/

A Pen by DriftwoodJP on CodePen.

License.

index.haml

.arrow-box
  %p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur eos aperiam facere nobis nulla suscipit, accusantium exercitationem natus hic molestiae rem, itaque labore explicabo totam sint commodi doloremque quos non.

style.scss

@import "compass/css3";
// Compass for border-radius

@mixin arrow-box(
    $position: top,
    $size: 30px,
    $color: #88b7d5,
    $bd-with: 4px,
    $bd-color: #c2e1f5
  ) {
  $bd-with-before: round(($bd-with * 1.41421356) + $size);
  $pos1: "";
  $pos2: "";
  @if $position == "right" {
    $pos1: "left";
    $pos2: "top";
  }
  @else if $position == "bottom" {
    $pos1: "top";
    $pos2: "left";
  }
  @else if $position == "left" {
    $pos1: "right";
    $pos2: "top";
  }
  @else {
    $pos1: "bottom";
    $pos2: "left";
  }

  position: relative;
  background: $color;
  border: $bd-with solid $bd-color;
  &:after, &:before {
    #{$pos1}: 100%;
    #{$pos2}: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
  }
  &:after {
    border-color: rgba($color, 0);
    border-#{$pos1}-color: $color;
    border-width: $size;
    margin-#{$pos2}: $size * -1;
  }
  &:before {
    border-color: rgba($bd-color, 0);
    border-#{$pos1}-color: $bd-color;
    border-width: $bd-with-before;
    margin-#{$pos2}: $bd-with-before * -1;
  }
}




.arrow-box {
  @include arrow-box(
    $position: left,
    $size: 20px,
    $color: #ffffff,
    $bd-with: 10px,
    $bd-color: #8FC4FA
  );
  // for your project code
  // ==============================
  margin: 2em;
  padding: 1em;
  @include border-radius(8px);
  // fix arrow position
  &:after, &:before {
    top: 50px; }
  // fix arrow shape
  // &:after {
  //   border-width: 16px;
  //   margin-top: -22px;
  //   border-top: 0; }
  // &:before {
  //   border-top: 0; }
  &:before {
    @include border-radius(8px); }
}