jquery Symmetrical Triangular arrow

The specific principle can refer to my article: jquery popup layer +css arrow making

Here's how to use it:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">Specific implementation code:
/** * jquery Arrow generated * @author: Xuzengqiang * @since: 2015-2-4 15:31:39**/;(function ($) {jQuery.fn.extend ({/** * Description: Generate specified arrowhead style * */arrow:function (options) {var defaultoptions = {color: ' #AFAFAF ', height:20,width:20,//direction: Default up ' top ' for selection [' Up ', ' Bottom ', ' left ', ' right ']direction: ' top '};var settings = jquery.extend (defaultoptions,options| | {}), current = $ (this), function Loadstyle () {current.css ({"Display": "Block", "width": "0", "height": "0"}); Settings.direction = = = "Top" | | Settings.direction = = = "Bottom") {Current.css ({"Border-left-width": Settings.width/2, "Border-right-width"): SETTINGS.WIDTH/2, "Border-left-style": "Solid", "Border-right-style": "Solid", "border-left-color": "Transparent", " Border-right-color ":" Transparent "}), if (settings.direction = = =" Top ") {Current.css ({" Border-bottom-width "): Settings.height, "Border-bottom-style": "Solid", "Border-bottom-color": Settings.color});} else {current.css ({"Border-top-width": Settings.height, "Border-top-style": "Solid", "Border-top-color": Settings.color});}} else if (settingS.direction = = = "Left" | | Settings.direction = = = "Right") {Current.css ({"Border-top-width": SETTINGS.HEIGHT/2, "Border-bottom-width": SETTINGS.HEIGHT/2, "Border-top-style": "Solid", "Border-bottom-style": "Solid", "border-top-color": "Transparent", " Border-bottom-color ":" Transparent "}), if (settings.direction = = =" Left ") {Current.css ({" Border-right-width "): Settings.width, "Border-right-style": "Solid", "Border-right-color": Settings.color});} else {current.css ({"Border-left-width": Settings.width, "Border-left-style": "Solid", "Border-left-color": Settings.color});}}} Return This.each (function () {Loadstyle ();});});}) (JQuery);



jquery Symmetrical Triangular arrow