Use CSS3 to customize the graffiti style border and css3 border

Use CSS3 to customize the graffiti style border and css3 border

Today we will share a custom border application based on pure CSS3. It looks like a Tooltip control, because the bottom border has a small triangle, just like the text box referenced in many places. In addition, this CSS3 border is graffiti-style and looks very personalized. The advantage of using CSS3 to customize the border is that it can adapt to the number of texts inside the border.

You can also view online demos here

Next, let's share the implementation method, which consists of HTML code and CSS code.

HTML code:

<Div> CSS3 simple implementation of graffiti style border Welcome to </div>

The HTML code structure is very simple. It is only composed of three Divs. Of course, the CSS code below is the key. Let's explain it step by step.

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, uses border-radius to achieve the border rounded corner effect, and uses box-shadow to implement a slight shadow effect, you can also set a property value to make the shadow more visible.

.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, .75)}.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 is similar to the previous one, but there is one more feature, that is, the small triangle effect of the bottom border is achieved using the before attribute of CSS3, so there is a tooltip effect.

.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. Like the box implementation on the outer layer, the before attribute is also used to implement the small triangle effect.

Others are the settings of border line color and background color, which is very simple. Source code download>

With CSS3, how does one implement a rounded border?

# Gaga {border: 3px solid # f00; border-radius: 5px 6px 7px 8px ;}
5 PX indicates the radians in the upper left corner;
6px indicates the radians in the upper right corner;
7px indicates the radians in the lower right corner;
8 PX indicates the radians in the lower left corner;
Hope to help you

How to Use CSS3 to implement the code of the rounded border?

Code:
. Div
{
Border-radius: 10px;
}
The album name is the ninth set in "Buid New World". It mainly describes the border, shadow, and gradient of CSS3,