Pure CSS3 to implement custom graffiti style borders

Today we're going to share a custom border app based on Pure CSS3, which looks like a ToolTip control because the bottom border has a small triangle, just like a reference text box in many places. In addition, this CSS3 border is graffiti-style and looks very personal. The benefit of implementing a custom border with CSS3 is the amount of text that can be adapted to the interior of the border.

Let's share the implementation of the method, mainly composed of HTML code and CSS code.

HTML code:

<div>    <div>        <div>css3 simple Implementation Doodle style border Welcome to</div>    </div></div>

HTML code structure is very simple, just 3 div composition, of course, the following CSS code is the key, we step by step to explain.

CSS code:

. Wrap {    padding:35px 25px;    width:450px;    margin:40px Auto;    Background: #586786;    border-radius:255px 15px 225px 15px/15px 225px 15px 255px;    Color: #eee;    box-shadow:1px 1px 0px rgba (0, 0, 0,. 75)}

This CSS code defines the outermost border, using the Border-radius to achieve the rounded corners of the border, while taking advantage of the Box-shadow implementation of the class slightly shadow effect, not very obvious, you can also fix a property value to make the shadow more obvious.

. box {    position:relative;    Background: #fff;    Border:solid 5px #fff;    width:200px;    height:100px;    margin:0 Auto;    border-radius:255px 15px 225px 15px/15px 225px 15px 255px;    padding:10px;    Color: #666;    box-shadow:2px 3px 1px rgba (0, 0, 0,.)}.box:before {    content: "";    Position:absolute;    Bottom: -20px;    left:60px;    border:0;    border-right-width:30px;    border-bottom-width:20px;    Border-style:solid;    Border-color:transparent #fff;    Display:block;    width:0;}

This box class and the previous similar, but one more feature, is the use of CSS3: Before attribute to achieve the bottom border of the small triangle effect, so there is the effect of the ToolTip.

. box. box {    position:absolute;    top:5px;    left:5px;    width:180px;    height:80px;    Border-color: #593207;    Box-shadow:none;}. box. Box:before {    left:45px;    Border-color:transparent #593207;}

This is the most internal box, just like the one on the outside of the box, which also uses the Before property to achieve the small triangle effect.

The other is the setting of the border line color and background color, it's very simple.

Knowledge Points:

Syntax and parameters for the Border-radius property

Border-radius:none | <length> {1,4}[/<length>{1,4}]

Border-radius is an abbreviated method. If the backslash symbol "/" exists, the value preceding "/" is the horizontal direction radius of the set element fillet, and the value after "/" is the radius of the vertical direction in which the element fillet is set, and if there is no "/", the radius value of the horizontal and vertical direction of the element fillet is equal. The other four values are set according to the order of Top-left, Top-right, Bottom-right, and Bottom-left, which are mainly presented in the following four scenarios.

1) Border-radius:<length>{1} sets a value, Top-left, Top-right, Bottom-right, and bottom-left four values equal, which is the same as the four fillet of the element.

2) Border-radius:<length>{2} sets two values, Top-left equals Bottom-right, and takes the first value, Top-right equals Bottom-left, and takes a second value. That is, the upper-left and lower-right corner of the element takes the first value, the upper-right corner and the lower-left corner take the second value.

3) Border-radius:<length>{3} sets three values, the first value is set Top-left, the second value is set Top-right and Bottom-left, and the third value is set to Bottom-right.

4) Border-radius:<length>{4} elements four rounded corners take different values, the first value is set Top-left, the second value is set Top-right, the third value is set Bottom-right, The last value is set bottom-left.

The Border-radius property parameter is very simple and consists of two values.

None: The default value, which indicates that the element has no rounded corners.

<LENGTH>: The length value consisting of floating-point numbers and unit identifiers. Can not be negative.

Note that if you want to reset an element without a fillet, the value none has no effect, you need to take the Border-radius value of the element to 0.

Border-radius and Border properties, you can split each corner separately. This Border-radius derives four additional sub-properties, and they are all first y-axis and then x-axis.

border-top-left-radius:<length>/<length>; defines the upper-left corner of the element.

border-top-right-radius:<length>/<length>; defines the upper-right corner fillet of the element.

Border-bottom-right–radius:<length>/<length>; defines the lower-right corner of the element rounded corners.

border-bottom-left-radius:<length>/<length>; defines the lower-left corner of the element.

The above four sub-attributes are the same as Border-radius, except that the horizontal and vertical directions are only one value, the value preceding the "/" is the horizontal direction radius, and the subsequent value is the vertical direction radius. If the second value is omitted, the element's horizontal and vertical radii are actually one-fourth circles with a radius of "<length>". If any of the values is "0", this angle is not rounded.

Pure CSS3 to implement custom graffiti style borders