Use the mixin inside of a ::before or ::after pseudo element.
E.g.:
div::before {
@include svg-triangle(
$width: 30px, // any unit
$height: 20px, // any unit
$borders: left right, // left, right, bottom, or any combination of the 3
$border-color: #cccccc, // hex
| /* dockter eval | |
| namespace: components | |
| name: [{[Component name]}] | |
| description: [{[Description]}] | |
| file: [{[Component name]}].less | |
| require: | |
| - jquery | |
| endeval */ |
| // The Template | |
| var marker_template = '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="20px" height="35px" viewBox="0 0 30 49" style="enable-background:new 0 0 30 49;" xml:space="preserve"><path class="marker-background" fill="[[ bg ]]" d="M15,48.5c-1.1-5.5-3.1-10-5.4-14.2c-1.8-3.1-3.8-6-5.7-9c-0.6-1-1.2-2.1-1.8-3.1 c-1.2-2.1-2.2-4.5-2.1-7.7C0.1,11.4,1,9,2.2,6.9c2.1-3.3,5.7-6,10.4-6.8c3.9-0.6,7.5,0.4,10.1,1.9c2.1,1.2,3.7,2.9,5,4.8 c1.3,2,2.2,4.4,2.3,7.5c0,1.6-0.2,3.1-0.6,4.3c-0.4,1.2-1,2.3-1.5,3.4c-1,2.2-2.4,4.2-3.7,6.1C20.3,34.2,16.6,40.3,15,48.5z"/><circle class="marker-circle" fill="[[ circle ]]" cx="15" cy="15" r="5"/><text class="marker-text" x="15" y="22" text-anchor="middle" fill="[[ textColor ]]" font-family="MyriadPro-Regular" font-size="18">[[ text ]]</text></svg>'; | |
| // Creating a marker | |
| var icon = marker_template | |
| .replace('[[ bg ]]', '') // some hex color | |
| .replace('[[ circle ]]', '') // some hex color | |
| .replace('[[ text ]] |
| var Zion = function() { | |
| var ret; | |
| if(this instanceof Window) { | |
| ret = new Zion(); | |
| } | |
| else ret = this; | |
| return ret | |
| }; | |
| Zion.prototype.extend = function() { |
| /** | |
| * First, make sure you're importing bootstraps normal grid system. Then include | |
| * this file AFTER bootstrap. | |
| * You MUST use autoprefixer during compile time to be cross-browser compat. | |
| * | |
| * The .flex class can only be used on the bootstrap .row class. The .row.flex | |
| * element should only container bootstrap columns. The columns can contain | |
| * whatever you want, but don't have anything as a direct decendant of the | |
| * .row.flex that is not a bootstrap column or shit begets cray cray. | |
| */ |
| /** | |
| * Created by Tim on 9/5/15. | |
| * Special thanks to James Padolsey: | |
| * http://james.padolsey.com/javascript/parsing-urls-with-the-dom/ | |
| * | |
| * Seriously, why didn't I think of that??? | |
| * | |
| * Pretty much the same code as link above. Cleaned up the regex a bit to avoid | |
| * false errors in IDEs. Added some checks so we default to the document | |
| * location if nothing is passed. I also check to see if the string passed is a |
| Falsey values in JavaScript | |
| false | |
| 0 | |
| -0 | |
| "" | |
| '' | |
| null | |
| undefined | |
| NaN |
| if(!is_admin() && is_user_logged_in()) { | |
| remove_action( 'wp_footer', 'wp_admin_bar_render'); | |
| add_action( 'wp_head', 'wp_admin_bar_render', 1000 ); | |
| function make_admin_bar_static() { | |
| echo ' | |
| <style type="text/css"> | |
| html[lang] { | |
| margin-top: 0px !important; | |
| } |
| <?php | |
| /** | |
| ** A base module for [select_posttype] and [select_posttype*] | |
| **/ | |
| /* Shortcode handler */ | |
| add_action( 'wpcf7_init', 'wpcf7_add_shortcode_select_posttype' ); | |
| function wpcf7_add_shortcode_select_posttype() { |
| /** | |
| * User: TimAnderson | |
| * Date: 12/1/15 | |
| * Time: 1:25 PM | |
| */ | |
| /** | |
| * Test responsive screen sizes by creating a visible-[screen]-block div. Passing multiple screen sizes will return true if one of them is true. | |
| * See {@link http://codepen.io/mindfullsilence/pen/BjRJvN} for example usage. | |
| * @requires jQuery |