Skip to content

Instantly share code, notes, and snippets.

@DriftwoodJP
Last active August 29, 2015 14:10
Show Gist options
  • Save DriftwoodJP/5a68cbba8d1ced42e8bd to your computer and use it in GitHub Desktop.
Save DriftwoodJP/5a68cbba8d1ced42e8bd to your computer and use it in GitHub Desktop.
CSS Arrow
.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.
@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); }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment