Simulate a small triangle with a border

It is relatively creative to use borders to simulate small triangles.

1. <style>

1. * {Font-size: 14px;/* font size */} span {display: block; Font: 0/0 ""; Border: 7px solid;/* The larger the border value, larger triangle */border-color: # fff #444;/* change the color to produce different effects */margin-top: 5px }</style> <div> <span> </div>

   I tried it and found that it looks nice but not practical, but it also reminds us that it is necessary to review the style attributes of border:

   Syntax:

 

Border-color: Color

 

Set the border color of the object.

If all four parameter values are provided, the four borders are added in the order of Top-right-bottom-left.

If only one edge is provided, all four edges are used. If two are provided, the first is used for top-bottom, and the second is used for left-right. If three are provided, the first is used for the top, the second is used for the left-right, and the third is used for the bottom.

This attribute is read-only for currentstyle objects. Other objects can be read and written.

In ie5.5 +, border attributes can be directly applied to inline elements. In earlier versions, to use this attribute for inline elements, you must first set the height or width attribute of the object, set the position attribute to absolute, or set the display attribute to block.

If border-style is set to none, this attribute will be ineffective. The corresponding script feature is bordercolor.

Try:

1. border-color:#fff #fff #fff #444;

    

The change is as follows:

1. border-color:#fff #444 #fff #444;

    

Let's take a look. I have to look at the border-style and border-width reference manuals as follows:Syntax:

border-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset 

Set the style of the object border.

If all four parameter values are provided, the four borders are added in the order of Top-right-bottom-left. If only one

Used for all four edges. If two are provided, the first is used for top-bottom, and the second is used for left-right. For example

If three are provided, the first is used for the top, the second is used for the left-right, and the third is used for the bottom.

Valid value:

None: default value. No border. It is not affected by any specified border-width value.

Hidden: Hide the border. Internet Explorer does not support

Dotted: ie4 + on Mac and ie5.5 + on Windows and UNIX platforms. Otherwise

Line

Dashed: ie4 + on Mac and ie5.5 + on Windows and UNIX platforms are dotted lines. Otherwise

Solid line

Solid: solid border

Double: double-line border. The sum between the two single lines and their intervals is equal to the specified border-width value.

Groove: Draw a 3D groove Based on the border-color value

Ridge: Draw a 3D convex slot based on the border-color value

Inset: draws a 3D Concave edge based on the border-color value.

Outset: Draw 3D convex edges Based on border-color values.

Note:

This attribute is read-only for currentstyle objects. Other objects can be read and written.

In ie5.5 +, border attributes can be directly applied to inline elements. In earlier versions

To use this attribute, you must first set the height or width attribute of the object, or set the position attribute to.

Bsolute, or set the display attribute to block.

The corresponding script feature is borderstyle.

Syntax:

Border-width: Medium | thin | thick | length

Valid value:

Medium: default value. Default width

Thin: smaller than the default width

Thick: greater than the default width

Length: The length value composed of floating point numbers and unit identifiers. It cannot be a negative value. See length unit

　　

Note:

Set the Border width of the object.

If all four parameter values are provided, the four borders are added in the order of Top-right-bottom-left. If only one edge is provided, all four edges are used. If two are provided, the first is used for top-bottom, and the second is used for left-right.

If three are provided, the first is used for the top, the second is used for the left-right, and the third is used for the bottom.

This attribute is read-only for currentstyle objects. Other objects can be read and written.

In ie5.5 +, border attributes can be directly applied to inline elements. In earlier versions, to use this attribute for inline elements, you must first set the height or width attribute of the object or set the position attribute

Or set the display attribute to block.

If border-style is set to none, this attribute will be ineffective. The corresponding script feature is borderwidth.